浅谈JavaScript中的Map、WeakMap、Set和WeakSet
Jan 30, 2021 pm 06:19 PM我猜想,超过70%的JavaScript开发人员仅使用对象来收集和维护其项目中的数据。好吧,确实如此,新的集合对象(例如Map和Set)即使在2015年问世也没有得到充分利用。
因此,今天,我将讨论2015年以来的神奇新功能——Map,Set,WeakMap和WeakSet。
阅读之前
- 这篇文章并不是要告诉你只能用它们。但我见过一些应聘者在编码考试中使用了其中的一种,我喜欢在某些情况下使用它们。由你决定何时在项目中使用它们。
- 你应该知道什么是可迭代的,以便更好地了解我的讨论。
Objects
我们应该首先讨论如何使用对象。
好吧,我相信90%以上的人已经知道这部分内容了,因为你点击这篇文章是为了了解新的集合对象,但对于JavaScript的初学者来说,我们还是简单说说它们吧。
1 2 3 4 5 6 7 8 9 10 |
|
所以我做了一个 algorithm
对象,它的key和value是一个字符串类型的值,而我通过用 .
关键字来调用该值。
另外,for-in
循环也很适合在对象中循环。你可以用 []
关键字访问其键对应的值。但是不能使用 for-of
循环,因为对象是不可迭代的。
对象的属性可以用 delete
关键字来删除。这样就可以彻底摆脱对象的属性,大家要注意不要和这种方法混淆。
1 2 3 4 5 |
|
algorithm.site = undefined
只是将新值分配给 site
。
好的,我们已经快速讨论了有关对象的一些事项:
- 如何添加属性
- 如何遍历对象
- 如何删除属性
Map
Map 是JavaScript中新的集合对象,其功能类似于对象。但是,与常规对象相比,存在一些主要差异。
首先,让我们看一个创建Map对象的简单示例。
如何添加属性
1 2 |
|
Map 不需要创建任何内容,但是添加数据的方式略有不同。
1 2 |
|
Map 有一种特殊的方法可在其中添加称为 set
的属性。它有两个参数:键是第一个参数,值是第二个参数。
1 2 3 4 |
|
但是,它不允许你在其中添加现有数据。如果 Map 对象中已经存在与新数据的键对应的值,则不会添加新数据。
1 2 |
|
但是你可以用其他值覆盖现有数据。
如何遍历对象
Map 是一个可迭代的对象,这意味着可以使用 for-of
语句将其映射。
1 2 3 4 5 |
|
要记住的一件事是 Map 以数组形式提供数据,你应该解构数组或访问每个索引以获取键或值。
要仅获取键或值,还有一些方法可供你使用。
1 2 3 4 5 6 |
|
你甚至可以使用展开操作符(...
)来获取Map的全部数据,因为展开操作符还可以在幕后与可迭代对象一起工作。
1 2 |
|
如何删除属性
从 Map 对象中删除数据也很容易,你所需要做的就是调用 delete
。
1 2 3 4 |
|
delete
返回布尔值,该布尔值指示 delete
函数是否成功删除了数据。如果是,则返回 true
,否则返回 false
。
WeakMap
WeakMap起源于Map,因此它们彼此非常相似。但是,WeakMap具有很大的不同。
WeakMap的名字是怎么来的呢?嗯,是因为它与它的引用链接所指向的数据对象的连接或关系没有Map的连接或关系那么强,所以它是弱的。
那么,这到底是什么意思呢?
差异1:key必须是对象
1 2 3 4 5 6 |
|
你可以将任何值作为键传入Map对象,但WeakMap不同,它只接受一个对象作为键,否则,它将返回一个错误。
差异2:并非Map中的所有方法都支持
可以使用WeakMap的方法如下。
- delete
- get
- has
- set
这个话题最大的不同是WeakMap不支持迭代对象的方法。但是为什么呢?下面将对此进行描述。
区别3:当GC清理引用时,数据会被删除
与Map相比,这是最大的不同。
1 2 3 4 5 6 7 8 9 10 |
|
当 John
对象被垃圾回收时,Map对象将保持引用链接,而WeakMap对象将丢失链接。所以当你使用WeakMap时,你应该考虑这个功能。
Set
Set也非常类似于Map,但是Set对于单个值更有用。
如何添加属性
1 2 3 4 5 6 |
|
与Map一样,Set也阻止我们添加相同的值。
1 2 3 4 5 |
|
如何遍历对象
由于Set是一个可迭代的对象,因此可以使用 for-of
或 forEach
语句。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
如何删除属性
这一部分和 Map 的删除完全一样。如果数据被成功删除,它返回 true
,否则返回 false
。
1 2 3 4 5 |
|
如果你不想将相同的值添加到数组表单中,则Set可能会非常有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
WeakSet
与WeakMap一样,WeakSet也将丢失对内部数据的访问链接(如果内部数据已被垃圾收集)。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
一旦对象 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
更多编程相关知识,请访问:编程入门!!
Atas ialah kandungan terperinci 浅谈JavaScript中的Map、WeakMap、Set和WeakSet. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript

Penjelasan terperinci tentang fungsi Set tag dalam teg SQL dinamik MyBatis

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata

Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
