浅谈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可能是非常独特和强大的东西,这取决于每个情况。所以我希望有一天,你能有机会使用它们。
原文地址: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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat 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



Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

Tafsiran teg SQL dinamik MyBatis: Penjelasan terperinci tentang penggunaan teg Set MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik Ia menyediakan banyak teg SQL dinamik dan boleh membina pernyataan operasi pangkalan data secara fleksibel. Antaranya, tag Set ialah tag yang digunakan untuk menjana klausa SET dalam kenyataan UPDATE, yang sangat biasa digunakan dalam operasi kemas kini. Artikel ini akan menerangkan secara terperinci penggunaan teg Set dalam MyBatis dan menunjukkan kefungsiannya melalui contoh kod tertentu. Apakah itu Set tag Set tag digunakan dalam MyBati

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Mengoptimumkan prestasi peta bahasa Go Dalam bahasa Go, peta ialah struktur data yang sangat biasa digunakan, digunakan untuk menyimpan koleksi pasangan nilai kunci. Walau bagaimanapun, prestasi peta mungkin terjejas apabila memproses sejumlah besar data. Untuk meningkatkan prestasi peta, kami boleh mengambil beberapa langkah pengoptimuman untuk mengurangkan kerumitan masa operasi peta, dengan itu meningkatkan kecekapan pelaksanaan program. 1. Pra-peruntukkan kapasiti peta Apabila membuat peta, kita boleh mengurangkan bilangan pengembangan peta dan meningkatkan prestasi program dengan pra-peruntukan kapasiti. Secara umumnya, kami
