我猜想，超过70％的JavaScript开发人员仅使用对象来收集和维护其项目中的数据。好吧，确实如此，新的集合对象（例如Map和Set）即使在2015年问世也没有得到充分利用。
因此，今天，我将讨论2015年以来的神奇新功能——Map，Set，WeakMap和WeakSet。
阅读之前
我们应该首先讨论如何使用对象。
好吧，我相信90%以上的人已经知道这部分内容了，因为你点击这篇文章是为了了解新的集合对象，但对于JavaScript的初学者来说，我们还是简单说说它们吧。
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
所以我做了一个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对象被垃圾回收时，Map对象将保持引用链接，而WeakMap对象将丢失链接。所以当你使用WeakMap时，你应该考虑这个功能。
Set也非常类似于Map，但是Set对于单个值更有用。
const set = new Set(); set.add(1); set.add('john'); set.add(BigInt(10)); // Set(4) {1, "john", 10n}
与Map一样，Set也阻止我们添加相同的值。
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 von浅谈JavaScript中的Map、WeakMap、Set和WeakSet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
