乐趣区

关于前端:JavaScript中的MapWeakMapSet和WeakSet介绍

jiezi

我猜测，超过 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 可能是十分独特和弱小的货色，这取决于每个状况。所以我心愿有一天，你能有机会应用它们。

本文首发于公众号 《前端全栈开发者》 ID：by-zhangbing-dev，第一工夫浏览最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘材料，准能为你节俭不少钱！

退出移动版