Une brève discussion sur Map, WeakMap, Set et WeakSet en JavaScript

Je suppose que plus de 70 % des développeurs JavaScript utilisent uniquement des objets pour collecter et conserver des données dans leurs projets. Eh bien, c'est vrai, les nouveaux objets de collection comme Map et Set sont sous-utilisés même lors de leur sortie en 2015.

Alors aujourd'hui, je vais parler des nouvelles fonctionnalités étonnantes de 2015 – Map, Set, WeakMap et Ensemble faible .

Avant de lire

• Cet article n'a pas pour but de vous dire de les utiliser uniquement. Mais j'ai vu certains candidats en utiliser un lors d'examens de codage, et j'aime les utiliser dans certaines situations. C'est à vous de décider quand les utiliser dans votre projet.
• Vous devriez savoir ce qu'est un itérable pour mieux comprendre ma discussion.

Objets

Nous devrions d'abord discuter de la façon d'utiliser les objets.

D'accord, je pense que plus de 90 % des gens connaissent déjà cette partie, car vous avez cliqué sur cet article pour en savoir plus sur le nouvel objet de collection, mais pour les débutants en JavaScript, restons simples, dites-leur.

const algorithm = { site: "leetcode" };
console.log(algorithm.site); // leetcode

for (const key in algorithm) {
  console.log(key, algorithm[key]);
}

// site leetcode
delete algorithm.site;
console.log(algorithm.site); // undefined

J'ai donc créé un objet algorithm, sa clé et sa valeur sont une valeur de type chaîne, et j'ai appelé la valeur en utilisant le mot-clé ..

De plus, les boucles for-in sont également idéales pour parcourir des objets. Vous pouvez accéder à la valeur correspondant à sa clé à l'aide du mot-clé []. Mais vous ne pouvez pas utiliser la boucle for-of car l'objet n'est pas itérable.

Les attributs des objets peuvent être supprimés à l'aide du mot-clé delete. De cette façon, vous pouvez vous débarrasser complètement des propriétés de l’objet. Vous devez faire attention à ne pas le confondre avec cette méthode.

const algorithm = { site: "leetcode" };
// Property is not removed!!
algorithm.site = undefined;
// Property is removed!!
delete algorithm.site;

algorithm.site = undefined attribue simplement la nouvelle valeur à site.

D'accord, nous avons rapidement discuté de quelques points concernant les objets :

• Comment ajouter des propriétés
• Comment parcourir des objets
• Comment pour supprimer des propriétés

Map

Map est un nouvel objet de collection en JavaScript qui fonctionne comme un objet. Il existe cependant quelques différences majeures par rapport aux objets classiques.

Tout d’abord, regardons un exemple simple de création d’un objet Map.

Comment ajouter des attributs

const map = new Map();
// Map(0) {}

Carte Il n'est pas nécessaire de créer quoi que ce soit, mais la manière d'ajouter des données est légèrement différente.

map.set('name', 'john');
// Map(1) {"name" => "john"}

Map a une manière spéciale d'y ajouter des propriétés appelées set. Il prend deux paramètres : la clé est le premier paramètre et la valeur est le deuxième paramètre.

map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}
map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}

Cependant, il ne vous permet pas d'y ajouter des données existantes. Si une valeur correspondant à la clé des nouvelles données existe déjà dans l'objet Map, les nouvelles données ne seront pas ajoutées.

map.set('phone', 'Galaxy');
// Map(2) {"name" => "john", "phone" => "Galaxy"}

Mais vous pouvez écraser les données existantes par d'autres valeurs.

Comment parcourir un objet

Map est un objet itérable, ce qui signifie qu'il peut être mappé à l'aide de l'instruction for-of.

for (const item of map) {
  console.dir(item);
}
// Array(2) ["name", "john"]
// Array(2) ["phone", "Galaxy"]

Une chose à retenir est que Map fournit des données sous la forme d'un tableau, vous devez déstructurer le tableau ou accéder à chaque index pour obtenir la clé ou la valeur.

Pour obtenir uniquement les clés ou les valeurs, vous pouvez utiliser certaines méthodes.

map.keys();
// MapIterator {"name", "phone"}
map.values();
// MapIterator {"john", "Galaxy"}
map.entries();
// MapIterator {"name" => "john", "phone" => "Galaxy"}

Vous pouvez même utiliser l'opérateur spread (...) pour obtenir toutes les données d'une carte, car l'opérateur spread travaille également en coulisses avec des objets itérables.

const simpleSpreadedMap = [...map];
// [Array(2), Array(2)]

Comment supprimer des attributs

Supprimer des données d'un objet Map est également simple, il vous suffit d'appeler delete.

map.delete('phone');
// true
map.delete('fake');
// false

delete Renvoie une valeur booléenne indiquant si la fonction delete a réussi à supprimer les données. Si oui, retournez true, sinon retournez false.

WeakMap

WeakMap est originaire de Map, ils sont donc très similaires les uns aux autres. Cependant, WeakMap est très différent.

D'où vient le nom WeakMap ? Eh bien, c'est parce que sa connexion ou sa relation avec l'objet de données pointé par son lien de référence n'est pas aussi forte que celle de Map, elle est donc faible.

Alors, qu’est-ce que cela signifie ?

Différence 1 : la clé doit être un objet

const John = { name: 'John' };
const weakMap = new WeakMap();
weakMap.set(John, 'student');
// WeakMap {{...} => "student"}
weakMap.set('john', 'student');
// Uncaught TypeError: Invalid value used as weak map key

Vous pouvez transmettre n'importe quelle valeur dans l'objet Map en tant que clé, mais WeakMap est différent, il n'accepte qu'un objet comme clé, sinon, cela renverra une erreur.

Différence 2 : Toutes les méthodes de Map ne sont pas prises en charge.

Les méthodes qui peuvent utiliser WeakMap sont les suivantes.

• delete
• get
• has
• set

La plus grande différence dans ce sujet est que WeakMap fait ne prend pas en charge les méthodes objet d’itération. Mais pourquoi ? Ceci est décrit ci-dessous.

Différence 3 : lorsque GC nettoie les références, les données seront supprimées

Par rapport à Map, c'est la plus grande différence.

let John = { major: "math" };

const map = new Map();
const weakMap = new WeakMap();

map.set(John, 'John');
weakMap.set(John, 'John');

John = null;
/* John 被垃圾收集 */

Lorsque l'objet John est récupéré, l'objet Map conservera le lien de référence, tandis que l'objet WeakMap perdra le lien. Ainsi, lorsque vous utilisez WeakMap, vous devriez considérer cette fonctionnalité.

Set

Set est également très similaire à Map, mais Set est plus utile pour les valeurs uniques.

Comment ajouter des attributs

const set = new Set();

set.add(1);
set.add('john');
set.add(BigInt(10));
// Set(4) {1, "john", 10n}

Comme Map, Set nous empêche également d'ajouter la même valeur.

set.add(5);
// Set(1) {5}

set.add(5);
// Set(1) {5}

如何遍历对象

由于Set是一个可迭代的对象，因此可以使用 for-of 或 forEach 语句。

for (const val of set) {
  console.dir(val);
}
// 1
// 'John'
// 10n
// 5

set.forEach(val => console.dir(val));
// 1
// 'John'
// 10n
// 5

如何删除属性

这一部分和 Map 的删除完全一样。如果数据被成功删除，它返回 true，否则返回 false。

set.delete(5); 
// true

set.delete(function(){});
// false;

如果你不想将相同的值添加到数组表单中，则Set可能会非常有用。

/* With Set */
const set = new Set();
set.add(1);
set.add(2);
set.add(2);
set.add(3);
set.add(3);
// Set {1, 2, 3}

// Converting to Array
const arr = [ ...set ];
// [1, 2, 3]

Object.prototype.toString.call(arr);
// [object Array]

/* Without Set */
const hasSameVal = val => ar.some(v === val);
const ar = [];

if (!hasSameVal(1)) ar.push(1);
if (!hasSameVal(2)) ar.push(2);
if (!hasSameVal(3)) ar.push(3);

WeakSet

与WeakMap一样，WeakSet也将丢失对内部数据的访问链接（如果内部数据已被垃圾收集）。

let John = { major: "math" };

const set = new Set();
const weakSet = new WeakSet();

set.add(John);
// Set {{...}}
weakSet.add(John);
// WeakSet {{...}}

John = null;
/* John 被垃圾收集 */

一旦对象 John 被垃圾回收，WeakSet就无法访问其引用 John 的数据。而且WeakSet不支持 for-of 或 forEach，因为它不可迭代。

比较总结

相同点：添加相同的值不支持。

Map vs. WeakMap：WeakMap仅接受对象作为键，而Map不接受。

Map and Set：

• 可迭代的对象，支持 for..of，forEach 或 ... 运算符
• 脱离GC关系

WeakMap and WeakSet：

• 不是一个可迭代的对象，不能循环。
• 如果引用数据被垃圾收集，则无法访问数据。
• 支持较少的方法。

结语

不过，我想，很多团队或公司还是没有使用Maps或Sets。也许是因为他们觉得没有必要，或者是因为数组仍然可以做到几乎所有他们想要的东西。

然而，在JavaScript中，Maps或Sets可能是非常独特和强大的东西，这取决于每个情况。所以我希望有一天，你能有机会使用它们。

原文地址：https://medium.com/better-programming/map-weakmap-set-weakset-in-javascript-77ecb5161e3

作者：Moon

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!