浅谈JavaScript中的Map、WeakMap、Set和WeakSet

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

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

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

阅读之前

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

Objects

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

好吧，我相信90%以上的人已经知道这部分内容了，因为你点击这篇文章是为了了解新的集合对象，但对于JavaScript的初学者来说，我们还是简单说说它们吧。

1

2

3

4

5

6

7

8

9

10

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 关键字来删除。这样就可以彻底摆脱对象的属性，大家要注意不要和这种方法混淆。

1

2

3

4

5

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对象的简单示例。

如何添加属性

1

2

const map = new Map();

// Map(0) {}

Map 不需要创建任何内容，但是添加数据的方式略有不同。

1

2

map.set('name', 'john');

// Map(1) {"name" => "john"}

Map 有一种特殊的方法可在其中添加称为 set 的属性。它有两个参数：键是第一个参数，值是第二个参数。

1

2

3

4

map.set('phone', 'iPhone');

// Map(2) {"name" => "john", "phone" => "iPhone"}

map.set('phone', 'iPhone');

// Map(2) {"name" => "john", "phone" => "iPhone"}

但是，它不允许你在其中添加现有数据。如果 Map 对象中已经存在与新数据的键对应的值，则不会添加新数据。

1

2

map.set('phone', 'Galaxy');

// Map(2) {"name" => "john", "phone" => "Galaxy"}

但是你可以用其他值覆盖现有数据。

如何遍历对象

Map 是一个可迭代的对象，这意味着可以使用 for-of 语句将其映射。

1

2

3

4

5

for (const item of map) {

  console.dir(item);

}

// Array(2) ["name", "john"]

// Array(2) ["phone", "Galaxy"]

要记住的一件事是 Map 以数组形式提供数据，你应该解构数组或访问每个索引以获取键或值。

要仅获取键或值，还有一些方法可供你使用。

1

2

3

4

5

6

map.keys();

// MapIterator {"name", "phone"}

map.values();

// MapIterator {"john", "Galaxy"}

map.entries();

// MapIterator {"name" => "john", "phone" => "Galaxy"}

你甚至可以使用展开操作符(...)来获取Map的全部数据，因为展开操作符还可以在幕后与可迭代对象一起工作。

1

2

const simpleSpreadedMap = [...map];

// [Array(2), Array(2)]

如何删除属性

从 Map 对象中删除数据也很容易，你所需要做的就是调用 delete。

1

2

3

4

map.delete('phone');

// true

map.delete('fake');

// false

delete 返回布尔值，该布尔值指示 delete 函数是否成功删除了数据。如果是，则返回 true，否则返回 false。

WeakMap

WeakMap起源于Map，因此它们彼此非常相似。但是，WeakMap具有很大的不同。

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

那么，这到底是什么意思呢？

差异1：key必须是对象

1

2

3

4

5

6

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相比，这是最大的不同。

1

2

3

4

5

6

7

8

9

10

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对于单个值更有用。

如何添加属性

1

2

3

4

5

6

const set = new Set();

 

set.add(1);

set.add('john');

set.add(BigInt(10));

// Set(4) {1, "john", 10n}

与Map一样，Set也阻止我们添加相同的值。

1

2

3

4

5

set.add(5);

// Set(1) {5}

 

set.add(5);

// Set(1) {5}

如何遍历对象

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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。

1

2

3

4

5

set.delete(5);

// true

 

set.delete(function(){});

// false;

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

/* 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也将丢失对内部数据的访问链接（如果内部数据已被垃圾收集）。

1

2

3

4

5

6

7

8

9

10

11

12

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

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

以上就是浅谈JavaScript中的Map、WeakMap、Set和WeakSet的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

javascript主要的循环有哪些

分享6款实用的时钟特效（收藏）

date对象常用的封装方法及遇到的问题解决

分享几个实用的单行 js 代码

javascript中怎么单行注释

d3js是什么

javascript怎么打印

抢先体验javascript es12新特性

element-ui对话框可拖拽的功能如何实现？（附代码）

js如何实现原生map

更多相关阅读请进入《javascript》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...