Tableaux associatifs JavaScript expliqués : objets, utilisations et principales différences

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est l’un des langages de programmation essentiels du développement web. Parmi ses nombreuses fonctionnalités, les « tableaux associatifs » constituent une structure importante qui facilite la gestion et le traitement efficaces des données.

Dans cet article, nous proposons une explication détaillée des tableaux associatifs en JavaScript, des concepts de base aux utilisations plus avancées. Des exemples de code sont inclus pour rendre le contenu facile à comprendre, même pour les débutants, afin que vous puissiez vous servir de cet article comme référence pratique.

2. Qu’est‑ce qu’un tableau associatif ?

2.1 Définition d’un tableau associatif

Un tableau associatif est un type de structure de données qui gère les données sous forme de paires « clé » et « valeur ». Alors que les tableaux classiques utilisent des indices numériques (0, 1, 2, …), les tableaux associatifs permettent d’accéder aux données à l’aide de clés de chaîne arbitraires.

2.2 Tableaux associatifs en JavaScript

En JavaScript, les tableaux associatifs sont représentés à l’aide d’objets. Les objets sont définis avec des accolades {} et stockent les données sous forme de paires clé–valeur.

Voici un exemple de base d’un tableau associatif en JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Différences entre les tableaux associatifs et les tableaux classiques

Les tableaux associatifs et les tableaux classiques diffèrent de la manière suivante.

2.4 Cas d’utilisation

Les tableaux classiques conviennent à la gestion de données de type liste, tandis que les tableaux associatifs sont pratiques pour manipuler des données avec des attributs spécifiques, comme les informations d’utilisateur ou les paramètres de configuration.

3. Comment créer des tableaux associatifs

3.1 Déclaration avec un littéral d’objet

La façon la plus courante de créer un tableau associatif en JavaScript consiste à utiliser un littéral d’objet.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Création avec new Object()

Une autre approche consiste à créer un objet à l’aide de new Object().

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Ajout de clés et de valeurs dynamiquement

En utilisant la notation entre crochets, vous pouvez également employer des variables comme clés.

let key = "color";
let product = {};
product[key] = "red";

4. Manipulation des tableaux associatifs

4.1 Ajout d’éléments

Ajout avec la notation point

let user = {};
user.name = "Tanaka";
user.age = 30;

Ajout avec la notation entre crochets

let user = {};
user["email"] = "tanaka@example.com";

4.2 Récupération d’éléments

Récupération avec la notation point

console.log(user.name); // "Tanaka"

Récupération avec la notation entre crochets

console.log(user["email"]); // "tanaka@example.com"

4.3 Mise à jour d’éléments

Vous pouvez mettre à jour une valeur existante en assignant une nouvelle valeur à la même clé.

user.age = 35;
console.log(user.age); // 35

4.4 Suppression d’éléments

Utilisez le mot‑clé delete pour supprimer une paire clé–valeur.

delete user.phone;
console.log(user.phone); // undefined

5. Parcourir les tableaux associatifs

5.1 Itération avec la boucle for...in

La boucle for...in vous permet d’itérer sur les clés d’un tableau associatif.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Utilisation de Object.keys() et forEach()

Vous pouvez récupérer un tableau de clés avec Object.keys() puis l’itérer avec forEach().

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Utilisation de Object.entries() et for...of

Avec Object.entries(), vous pouvez itérer simultanément sur les clés et les valeurs.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Tri des tableaux associatifs

6.1 Tri par clés

Les objets JavaScript ne sont pas directement triables, mais vous pouvez trier leurs clés puis accéder aux valeurs dans l’ordre trié.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Tri par valeurs

Pour trier par valeurs, convertissez l’objet en un tableau de paires clé–valeur en utilisant Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Remarques importantes lors du tri

Lorsque les valeurs sont stockées sous forme de chaînes, le tri numérique nécessite une conversion explicite.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Remarques importantes lors de l’utilisation des tableaux associatifs

7.1 Clés dupliquées et écrasement

Si la même clé est définie plusieurs fois, la valeur la plus récente écrase la précédente.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined et vérification de l’existence d’une clé

Pour vérifier si une clé existe dans un tableau associatif, utilisez l’opérateur in ou hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 La méthode push ne peut pas être utilisée

Les tableaux associatifs (objets) ne supportent pas la méthode push(), qui n’est disponible que pour les tableaux classiques.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Différences avec les données JSON

Les objets JavaScript et les données JSON sont liés mais ne sont pas identiques. Les objets doivent être convertis en chaînes JSON pour l’échange de données.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Résumé

8.1 Points clés des tableaux associatifs

• Les données sont gérées à l’aide de paires clé–valeur.
• Des opérations flexibles sont possibles, y compris l’ajout, la récupération, la mise à jour et la suppression de données.
• Les tableaux associatifs supportent l’itération et le tri grâce aux méthodes intégrées.

8.2 Exemples d’utilisation pratique

Voici un exemple de gestion de plusieurs objets utilisateur en utilisant un tableau combiné avec des tableaux associatifs.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – Questions fréquemment posées

Q1. Quelle est la différence entre les tableaux associatifs et les tableaux classiques ?

Les tableaux classiques utilisent des index numériques, tandis que les tableaux associatifs utilisent des clés de type chaîne pour accéder aux valeurs.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. Comment vérifier si une clé existe ?

Vous pouvez vérifier l’existence d’une clé en utilisant l’opérateur in.

if ("age" in user) {
  console.log(user.age);
}

10. Résumé final

Les tableaux associatifs JavaScript sont extrêmement utiles pour gérer et organiser les données.
Dans cet article, nous avons couvert tout, des concepts de base aux modèles d’utilisation plus avancés.

Prochaines étapes :

• Exécutez vous-même les exemples de code pour approfondir votre compréhension.
• Essayez d’intégrer les tableaux associatifs avec des données JSON et des opérations d’API.