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

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

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

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

 

[[333277]]

 

阅读之前

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

Objects

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

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

 

  1. const algorithm = { site: "leetcode" }; 
  2. console.log(algorithm.site); // leetcode 
  3.  
  4. for (const key in algorithm) { 
  5.   console.log(key, algorithm[key]); 
  6.  
  7. // site leetcode 
  8. delete algorithm.site; 
  9. console.log(algorithm.site); // undefined 

所以我做了一个 algorithm 对象,它的key和value是一个字符串类型的值,而我通过用 . 关键字来调用该值。

另外,for-in 循环也很适合在对象中循环。你可以用 [] 关键字访问其键对应的值。但是不能使用 for-of 循环,因为对象是不可迭代的。

对象的属性可以用 delete 关键字来删除。这样就可以彻底摆脱对象的属性,大家要注意不要和这种方法混淆。

 

  1. const algorithm = { site: "leetcode" }; 
  2. // Property is not removed!! 
  3. algorithm.site = undefined; 
  4. // Property is removed!! 
  5. delete algorithm.site; 

algorithm.site = undefined 只是将新值分配给 site。

好的,我们已经快速讨论了有关对象的一些事项:

  • 如何添加属性
  • 如何遍历对象
  • 如何删除属性

 

Map

Map 是JavaScript中新的集合对象,其功能类似于对象。但是,与常规对象相比,存在一些主要差异。

首先,让我们看一个创建Map对象的简单示例。

/ 如何添加属性 /

 

  1. const map = new Map(); 
  2. // Map(0) {} 

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

 

  1. map.set('name''john'); 
  2. // Map(1) {"name" => "john"

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

 

  1. map.set('phone''iPhone'); 
  2. // Map(2) {"name" => "john""phone" => "iPhone"
  3. map.set('phone''iPhone'); 
  4. // Map(2) {"name" => "john""phone" => "iPhone"

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

 

  1. map.set('phone''Galaxy'); 
  2. // Map(2) {"name" => "john""phone" => "Galaxy"

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

/ 如何遍历对象 /

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

 

  1. for (const item of map) { 
  2.   console.dir(item); 
  3. // Array(2) ["name""john"
  4. // Array(2) ["phone""Galaxy"

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

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

 

  1. map.keys(); 
  2. // MapIterator {"name""phone"
  3. map.values(); 
  4. // MapIterator {"john""Galaxy"
  5. map.entries(); 
  6. // MapIterator {"name" => "john""phone" => "Galaxy"

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

 

  1. const simpleSpreadedMap = [...map]; 
  2. // [Array(2), Array(2)] 

/ 如何删除属性 /

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

 

  1. map.delete('phone'); 
  2. // true 
  3. map.delete('fake'); 
  4. // false 

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

WeakMap

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

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

那么,这到底是什么意思呢?

/ 差异1:key必须是对象 /

 

  1. const John = { name'John' }; 
  2. const weakMap = new WeakMap(); 
  3. weakMap.set(John, 'student'); 
  4. // WeakMap {{...} => "student"
  5. weakMap.set('john''student'); 
  6. // Uncaught TypeError: Invalid value used as weak map key 

你可以将任何值作为键传入Map对象,但WeakMap不同,它只接受一个对象作为键,否则,它将返回一个错误。

/ 差异2:并非Map中的所有方法都支持 /

可以使用WeakMap的方法如下。

  • delete
  • get
  • has
  • set

这个话题最大的不同是WeakMap不支持迭代对象的方法。但是为什么呢?下面将对此进行描述。

/ 区别3:当GC清理引用时,数据会被删除 /

与Map相比,这是最大的不同。

 

  1. let John = { major: "math" }; 
  2.  
  3. const map = new Map(); 
  4. const weakMap = new WeakMap(); 
  5.  
  6. map.set(John, 'John'); 
  7. weakMap.set(John, 'John'); 
  8.  
  9. John = null
  10. /* John 被垃圾收集 */ 

当John对象被垃圾回收时,Map对象将保持引用链接,而WeakMap对象将丢失链接。所以当你使用WeakMap时,你应该考虑这个功能。

 

Set

Set也非常类似于Map,但是Set对于单个值更有用。

/ 如何添加属性 /

 

  1. const set = new Set(); 
  2.  
  3. set.add(1); 
  4. set.add('john'); 
  5. set.add(BigInt(10)); 
  6. // Set(4) {1, "john", 10n} 

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

 

  1. set.add(5); 
  2. // Set(1) {5} 
  3.  
  4. set.add(5); 
  5. // Set(1) {5} 

/ 如何遍历对象 /

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

 

  1. for (const val of set) { 
  2.   console.dir(val); 
  3. // 1 
  4. // 'John' 
  5. // 10n 
  6. // 5 
  7.  
  8. set.forEach(val => console.dir(val)); 
  9. // 1 
  10. // 'John' 
  11. // 10n 
  12. // 5 

/ 如何删除属性 /

这一部分和 Map 的删除完全一样。如果数据被成功删除,它返回 true,否则返回 false。

 

  1. set.delete(5);  
  2. // true 
  3.  
  4. set.delete(function(){}); 
  5. // false

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

 

  1. /* With Set */ 
  2. const set = new Set(); 
  3. set.add(1); 
  4. set.add(2); 
  5. set.add(2); 
  6. set.add(3); 
  7. set.add(3); 
  8. // Set {1, 2, 3} 
  9.  
  10. // Converting to Array 
  11. const arr = [ ...set ]; 
  12. // [1, 2, 3] 
  13.  
  14. Object.prototype.toString.call(arr); 
  15. // [object Array] 
  16.  
  17. /* Without Set */ 
  18. const hasSameVal = val => ar.some(v === val); 
  19. const ar = []; 
  20.  
  21. if (!hasSameVal(1)) ar.push(1); 
  22. if (!hasSameVal(2)) ar.push(2); 
  23. if (!hasSameVal(3)) ar.push(3); 

WeakSet

与WeakMap一样,WeakSet也将丢失对内部数据的访问链接(如果内部数据已被垃圾收集)。

 

  1. let John = { major: "math" }; 
  2.  
  3. const set = new Set(); 
  4. const weakSet = new WeakSet(); 
  5.  
  6. set.add(John); 
  7. // Set {{...}} 
  8. weakSet.add(John); 
  9. // WeakSet {{...}} 
  10.  
  11. John = null
  12. /* 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可能是非常独特和强大的东西,这取决于每个情况。所以我希望有一天,你能有机会使用它们。

责任编辑:华轩 来源: 今日头条
相关推荐

2016-08-01 16:26:34

ES6集合

2022-01-26 07:18:57

ES6WeakSetMap

2024-11-11 17:20:52

2020-08-02 23:20:36

JavaScriptmap()forEach()

2013-09-11 09:49:18

Java数组集合

2009-07-09 00:25:00

ScalaSet类Map类

2011-06-21 14:25:44

JavaScriptcookie

2009-06-17 16:01:28

2016-09-13 21:30:11

JavascriptCSPWeb

2023-06-14 08:54:09

Map方法ForEach方法

2021-09-02 15:24:25

Prisma JavaScript 类型安全

2017-04-10 10:35:02

JavaScript框架

2009-06-25 15:20:28

CollectionMap

2020-12-09 18:36:28

ObjectArrayJavaSc

2023-04-26 15:19:36

JavaScripMap数组

2020-12-22 14:11:45

JS forEach()map()

2021-05-09 20:03:04

Wine 6.8 JavaScriptMap 对象

2024-01-19 12:48:00

Redis存储数据库

2021-06-25 10:18:08

JavaScript Array.map 巧技拾遗

2016-12-06 10:30:39

JavaScriptWriteWriteln
点赞
收藏

51CTO技术栈公众号