Ich schätze, dass über 70 % der JavaScript-Entwickler Objekte nur zum Sammeln und Verwalten von Daten in ihren Projekten verwenden. Nun, es stimmt, neue Sammlungsobjekte wie Map und Set werden selbst bei ihrer Veröffentlichung im Jahr 2015 nicht ausreichend genutzt.
Heute werde ich über die erstaunlichen neuen Funktionen von 2015 sprechen – Map, Set, WeakMap und WeakSet.
Vor dem Lesen
Wir sollten zunächst besprechen, wie man Objekte verwendet.
Okay, ich glaube, mehr als 90 % der Leute kennen diesen Teil bereits, weil Sie auf diesen Artikel geklickt haben, um mehr über die neuen Sammlungsobjekte zu erfahren, aber für Anfänger in JavaScript, lassen Sie uns kurz darüber sprechen.
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); // undefinedAlso habe ich ein algorithm-Objekt erstellt, dessen Schlüssel und Wert ein String-Wert sind, und ich habe den Wert mit dem Schlüsselwort . aufgerufen. algorithm 对象，它的key和value是一个字符串类型的值，而我通过用 . 关键字来调用该值。
另外，for-in 循环也很适合在对象中循环。你可以用 [] 关键字访问其键对应的值。但是不能使用 for-of 循环，因为对象是不可迭代的。
对象的属性可以用 delete 关键字来删除。这样就可以彻底摆脱对象的属性，大家要注意不要和这种方法混淆。
const algorithm = { site: "leetcode" };
// Property is not removed!!
algorithm.site = undefined;
// Property is removed!!
delete algorithm.site;algorithm.site = undefined 只是将新值分配给 site。
好的，我们已经快速讨论了有关对象的一些事项：
Map 是JavaScript中新的集合对象，其功能类似于对象。但是，与常规对象相比，存在一些主要差异。
首先，让我们看一个创建Map对象的简单示例。
const map = new Map();
// Map(0) {}Map 不需要创建任何内容，但是添加数据的方式略有不同。
map.set('name', 'john');
// Map(1) {"name" => "john"}Map 有一种特殊的方法可在其中添加称为 set 的属性。它有两个参数：键是第一个参数，值是第二个参数。
map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}
map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}但是，它不允许你在其中添加现有数据。如果 Map 对象中已经存在与新数据的键对应的值，则不会添加新数据。
map.set('phone', 'Galaxy');
// Map(2) {"name" => "john", "phone" => "Galaxy"}但是你可以用其他值覆盖现有数据。
Map 是一个可迭代的对象，这意味着可以使用 for-of 语句将其映射。
for (const item of map) {
console.dir(item);
}
// Array(2) ["name", "john"]
// Array(2) ["phone", "Galaxy"]要记住的一件事是 Map 以数组形式提供数据，你应该解构数组或访问每个索引以获取键或值。
要仅获取键或值，还有一些方法可供你使用。
map.keys();
// MapIterator {"name", "phone"}
map.values();
// MapIterator {"john", "Galaxy"}
map.entries();
// MapIterator {"name" => "john", "phone" => "Galaxy"}你甚至可以使用展开操作符(...)来获取Map的全部数据，因为展开操作符还可以在幕后与可迭代对象一起工作。
const simpleSpreadedMap = [...map]; // [Array(2), Array(2)]
从 Map 对象中删除数据也很容易，你所需要做的就是调用 delete。
map.delete('phone'); // true map.delete('fake'); // false
delete 返回布尔值，该布尔值指示 delete 函数是否成功删除了数据。如果是，则返回 true，否则返回 false。
WeakMap起源于Map，因此它们彼此非常相似。但是，WeakMap具有很大的不同。
WeakMap的名字是怎么来的呢？嗯，是因为它与它的引用链接所指向的数据对象的连接或关系没有Map的连接或关系那么强，所以它是弱的。
那么，这到底是什么意思呢？
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你可以将任何值作为键传入Map对象，但WeakMap不同，它只接受一个对象作为键，否则，它将返回一个错误。
可以使用WeakMap的方法如下。
这个话题最大的不同是WeakMap不支持迭代对象的方法。但是为什么呢？下面将对此进行描述。
与Map相比，这是最大的不同。
let John = { major: "math" };
const map = new Map();
const weakMap = new WeakMap();
map.set(John, 'John');
weakMap.set(John, 'John');
John = null;
/* John 被垃圾收集 */当 John
for-in-Schleife auch sehr gut zum Durchlaufen von Objekten. Sie können auf den Wert zugreifen, der seinem Schlüssel entspricht, indem Sie das Schlüsselwort [] verwenden. Sie können jedoch keine for-of-Schleifen verwenden, da Objekte nicht iterierbar sind. Objekteigenschaften können mit dem Schlüsselwort delete gelöscht werden. Auf diese Weise können Sie die Eigenschaften des Objekts vollständig entfernen. Sie sollten darauf achten, es nicht mit dieser Methode zu verwechseln. const set = new Set();
set.add(1);
set.add('john');
set.add(BigInt(10));
// Set(4) {1, "john", 10n}algorithm.site = undefiniert weist einfach den neuen Wert site zu. Okay, wir haben schnell ein paar Dinge über Objekte besprochen: 🎜Wie man Eigenschaften hinzufügt 🎜🎜Wie man über Objekte iteriert 🎜🎜Wie man Eigenschaften entfernt 🎜🎜set.add(5);
// Set(1) {5}
set.add(5);
// Set(1) {5}for (const val of set) {
console.dir(val);
}
// 1
// 'John'
// 10n
// 5
set.forEach(val => console.dir(val));
// 1
// 'John'
// 10n
// 5set. Es benötigt zwei Parameter: Der Schlüssel ist der erste Parameter und der Wert ist der zweite Parameter. 🎜set.delete(5);
// true
set.delete(function(){});
// false;/* 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);for-of-Anweisung zugeordnet werden kann. 🎜let John = { major: "math" };
const set = new Set();
const weakSet = new WeakSet();
set.add(John);
// Set {{...}}
weakSet.add(John);
// WeakSet {{...}}
John = null;
/* John 被垃圾收集 */...) verwenden, um die gesamten Daten einer Karte abzurufen, da der Spread-Operator auch im Hintergrund mit iterierbaren Objekten arbeitet. 🎜rrreeedelete aufrufen. 🎜rrreee🎜delete Gibt einen booleschen Wert zurück, der angibt, ob die Funktion delete die Daten erfolgreich gelöscht hat. Wenn ja, wird true zurückgegeben, andernfalls wird false zurückgegeben. 🎜John-Objekt durch Garbage Collection erfasst wird, behält das Map-Objekt den Referenzlink, während das WeakMap-Objekt den Link verliert. Wenn Sie also WeakMap verwenden, sollten Sie diese Funktion in Betracht ziehen. 🎜🎜Set🎜🎜Set ist Map ebenfalls sehr ähnlich, aber Set ist für einzelne Werte nützlicher. 🎜🎜So fügen Sie Attribute hinzu🎜rrreee🎜Wie Map verhindert auch Set, dass wir denselben Wert hinzufügen. 🎜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);与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 或 ... 运算符WeakMap and WeakSet：
不过，我想，很多团队或公司还是没有使用Maps或Sets。也许是因为他们觉得没有必要，或者是因为数组仍然可以做到几乎所有他们想要的东西。
然而，在JavaScript中，Maps或Sets可能是非常独特和强大的东西，这取决于每个情况。所以我希望有一天，你能有机会使用它们。
原文地址：https://medium.com/better-programming/map-weakmap-set-weakset-in-javascript-77ecb5161e3
作者：Moon
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Map, WeakMap, Set und WeakSet in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
