La structure des données JavaScript de la carte

Découvrez la structure de données Map introduite dans ES6 pour associer des données à des clés. Avant son introduction, les gens utilisaient généralement des objets comme des cartes, en associant un objet ou une valeur à une valeur clé spécifique

Qu'est-ce qu'une carte

Une structure de données Map permet d'associer des données à une clé.

Avant ES6

ECMAScript6 (également appelé ES2015) a introduit la structure de données Map dans leJavaScriptmonde, avecEnsemble

Avant son introduction, les gens utilisaient généralement des objets comme des cartes, en associant un objet ou une valeur à une valeur clé spécifique:

const car = {}
car['color'] = 'red'
car.owner = 'Flavio'
console.log(car['color']) //red
console.log(car.color) //red
console.log(car.owner) //Flavio
console.log(car['owner']) //Flavio

Entrer la carte

ES6 a introduit la structure de données Map, nous fournissant un outil approprié pour gérer ce type d'organisation des données.

Une carte est initialisée en appelant:

const m = new Map()

Ajouter des éléments à une carte

Vous pouvez ajouter des éléments à la carte en utilisant lesetméthode:

m.set('color', 'red')
m.set('age', 2)

Récupérer un élément d'une carte par clé

Et vous pouvez extraire des éléments d'une carte en utilisantget:

const color = m.get('color')
const age = m.get('age')

Supprimer un élément d'une carte par clé

Utilisez ledelete()méthode:

m.delete('color')

Supprimer tous les éléments d'une carte

Utilisez leclear()méthode:

m.clear()

Vérifier si une carte contient un élément par clé

Utilisez lehas()méthode:

const hasColor = m.has('color')

Rechercher le nombre d'éléments sur une carte

Utilisez lesizebiens:

const size = m.size

Initialiser une carte avec des valeurs

Vous pouvez initialiser une carte avec un ensemble de valeurs:

const m = new Map([['color', 'red'], ['owner', 'Flavio'], ['age', 2]])

Clés de la carte

Tout comme n'importe quelle valeur (objet, tableau, chaîne, nombre) peut être utilisée comme valeur de l'entrée clé-valeur d'un élément de la carte,toute valeur peut être utilisée comme clé, même des objets.

Si vous essayez d'obtenir une clé inexistante en utilisantget()hors d'une carte, il reviendraundefined.

Des situations étranges que vous ne trouverez presque jamais dans la vraie vie

const m = new Map()
m.set(NaN, 'test')
m.get(NaN) //test
const m = new Map()
m.set(+0, 'test')
m.get(-0) //test

Itérer sur une carte

Itérer sur les clés de la carte

La carte offre lekeys()méthode que nous pouvons utiliser pour itérer sur toutes les clés:

for (const k of m.keys()) {
  console.log(k)
}

Itérer sur les valeurs de la carte

L'objet Map offre levalues()méthode que nous pouvons utiliser pour itérer sur toutes les valeurs:

for (const v of m.values()) {
  console.log(v)
}

Itérer sur la clé de la carte, les paires de valeurs

L'objet Map offre leentries()méthode que nous pouvons utiliser pour itérer sur toutes les valeurs:

for (const [k, v] of m.entries()) {
  console.log(k, v)
}

qui peut être simplifié à

for (const [k, v] of m) {
  console.log(k, v)
}

Convertir en tableau

Convertir les clés de la carte en un tableau

const a = [...m.keys()]

Convertir les valeurs de la carte en un tableau

const a = [...m.values()]

WeakMap

Une WeakMap est un type spécial de carte.

Dans un objet de carte, les éléments ne sont jamais récupérés. À la place, un WeakMap permet à tous ses éléments d'être collectés librement. Chaque clé d'un WeakMap est un objet. Lorsque la référence à cet objet est perdue, la valeur peut être récupérée.

Voici les principales différences:

  1. vous ne pouvez pas parcourir les clés ou les valeurs (ou les valeurs-clés) d'un WeakMap
  2. vous ne pouvez pas effacer tous les éléments d'un WeakMap
  3. vous ne pouvez pas vérifier sa taille

Un WeakMap expose ces méthodes, qui sont équivalentes à celles de Map:

  • get(k)
  • set(k, v)
  • has(k)
  • delete(k)

Les cas d'utilisation d'un WeakMap sont moins évidents que ceux d'un Map, et vous pourriez ne jamais en trouver le besoin, mais il peut essentiellement être utilisé pour créer un cache sensible à la mémoire qui n'interférera pas avec le garbage collection, ou pour une encapsulation soigneuse et une dissimulation d'informations.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: