JavaScript中的Map、WeakMap、Set和WeakSet介绍

我猜测，超过70％的JavaScript开发人员仅使用对象来收集和维护其项目中的数据。好吧，确实如此，新的集合对象（例如Map和Set）即便在2015年问世也没有获得充分利用。

所以，今天，我将讨论2015年以来的神奇新功能——Map，Set，WeakMap和WeakSet。

阅读以前

• 这篇文章并非要告诉你只能用它们。但我见过一些应聘者在编码考试中使用了其中的一种，我喜欢在某些状况下使用它们。由你决定什么时候在项目中使用它们。
• 你应该知道什么是可迭代的，以便更好地了解个人讨论。

---

Objects

咱们应该首先讨论如何使用对象。

好吧，我相信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

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

WeakMap起源于Map，所以它们彼此很是类似。可是，WeakMap具备很大的不一样。

WeakMap的名字是怎么来的呢？嗯，是由于它与它的引用连接所指向的数据对象的链接或关系没有Map的链接或关系那么强，因此它是弱的。

那么，这究竟是什么意思呢？

差别1：key必须是对象

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不一样，它只接受一个对象做为键，不然，它将返回一个错误。

差别2：并不是Map中的全部方法都支持

可使用WeakMap的方法以下。

• delete
• get
• has
• set

这个话题最大的不一样是WeakMap不支持迭代对象的方法。可是为何呢？下面将对此进行描述。

区别3：当GC清理引用时，数据会被删除

与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

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);
复制代码

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多是很是独特和强大的东西，这取决于每一个状况。因此我但愿有一天，你能有机会使用它们。

---

来源：medium.com/better-prog…，做者：Moon，翻译：公众号《前端全栈开发者》