https://www.boatsky.com/blog/47

?

?

ES5中的數(shù)據(jù)類(lèi)型分原始類(lèi)型與對(duì)象類(lèi)型。其中原始類(lèi)型有Number,Boolean,String,null,undefined，ES6中增加Symbol。ES5對(duì)象類(lèi)型為Object，從功能區(qū)別，廣義的Object又細(xì)分成幾種“子對(duì)象”，普通Object(“命名值”的無(wú)序集合)、數(shù)組（帶編號(hào)的值的有序集合）、函數(shù)（具有與它相關(guān)聯(lián)的可執(zhí)行代碼的對(duì)象），ES6新增了Set(無(wú)重復(fù)元素的集合)、Map(多組鍵值對(duì)的集合)。
?	?
?	<a href="http://www.boatsky.com/blog/47.html">Set與Map</a>早在ES6之前就有被模擬實(shí)現(xiàn)，ES6讓其成為標(biāo)準(zhǔn)，使用起來(lái)更加簡(jiǎn)單。
?	?
?	###Set
?	Set是一種無(wú)重復(fù)元素的集合，因其key與value是相同的，所以我們只討論它的value。
?	?
?	它的value取值可以是所有原始數(shù)據(jù)類(lèi)型Number,Boolean,String,null,undefined,Symbol，及對(duì)象數(shù)據(jù)類(lèi)型Object,Array,Function,Set,Map等，并且它不會(huì)在存取前后進(jìn)行類(lèi)型轉(zhuǎn)換。
?	?
?	Set提供了add,has,size,delete操作方法
?	#####add(value)
?	增加值，返回增加后的set對(duì)象。
?	#####has(value)
?	判斷是否有該值，返回布爾值
?	#####size
?	判斷長(zhǎng)度，返回?cái)?shù)字
?	#####delete(value)
?	刪除值，返回布爾值
?	#####clear()
?	清空集合
?	?
?	demo:
?	```javascript
?	console.log(set.add('5'));//set對(duì)象
?	console.log(set.has(5));//false
?	console.log(set.has('5'));//true
?	console.log(set.size);//1
?	console.log(set.delete('5'));//true
?	console.log(set.has('5'));//false
?	```
?	Set可使用keys,values,entries,forEach方法。因?yàn)閗ey與value是一樣的，keys與values結(jié)果都一樣。entries返回item的是key與value數(shù)組。forEach為了與其他對(duì)象參數(shù)保持一致，第一個(gè)參數(shù)與第二個(gè)參數(shù)很多余的一樣了。
?	demo:
?	```javascript
?	let set = new Set();
?	let aObj = {a: 1};
?	let bObj = {b: 2};
?	set.add(aObj).add(bObj);
?	for (let k of set.keys()) {
?	console.log(k);
?	}
?	//{a: 1}
?	//{b: 2}
?	?
?	for (let v of set.values()) {
?	console.log(v);
?	}
?	//{a: 1}
?	//{b: 2}
?	?
?	for (let item of set.entries()) {
?	console.log(item);
?	}
?	// [{a: 1},{b: 2}]
?	// [{a: 1},{b: 2}]
?	?
?	set.forEach(function(key, value, ownSet) {
?	console.log(valueCopy);
?	});
?	//{a: 1}
?	//{b: 2}
?	```
?	?
?	因?yàn)镾et是不可重復(fù)的，所以數(shù)組的去重一行簡(jiǎn)單的代碼便實(shí)現(xiàn)了:
?	```javascript
?	let arr = [1, 1, 2, 2, 3, 3];
?	[...new Set(arr)];
?	```
?	?
?	Set是強(qiáng)引用的集合，如果原始引用被移除了，Set集合并不會(huì)刪除原值，垃圾回收機(jī)制也無(wú)法對(duì)其回收：
?	```javascript
?	let set = new Set();
?	let key = {};
?	set.add(key);
?	console.log(set.has(key));//true
?	for (let item of set.entries()) {
?	console.log(item);
?	}
?	// [{},{}]
?	?
?	key = null;
?	console.log(set.has(key));//false
?	for (let item of set.entries()) {
?	console.log(item);
?	}
?	// [{},{}]
?	```
?	?
?	內(nèi)存無(wú)法釋放，可能引起內(nèi)存泄漏，為此Set有個(gè)WeakSet擴(kuò)展，使用弱引用，解決這個(gè)問(wèn)題，但WeakSet只支持add,has,delete方法，其他方法都不支持，并且不能傳入原始值。雖然可以用上述的has判斷，但我們需傳遞強(qiáng)引用才能驗(yàn)證弱引用是存被移除，這無(wú)法在代碼上實(shí)現(xiàn)，因?yàn)槲覀冎荒軅鬟f弱引用key：
?	```javascript
?	let set = new WeakSet();
?	let key = {};
?	set.add(key);
?	console.log(set.has(key));//true
?	key = null;
?	console.log(set.has(key));//false
?	```
?	此時(shí)我們無(wú)從得知，第二個(gè)set.has(key)為false是因?yàn)?/td>
?	[{},{}] !== [null,null]還是set是空集合。只能從概念上得知，是后者。
?	?
?	###Map
?	Map是多組鍵值對(duì)的有序集合，與Set幾乎是一樣的，參考上述Set即可，在此不做復(fù)述，只簡(jiǎn)述不同之處。
?	?
?	key與value可以不同。Map與Set相比，新增了set,get方法。
?	?
?	#####set(key,value)
?	設(shè)置值，返回map
?	#####get(key)
?	取值
?	?
?	Map也有一個(gè)與之對(duì)應(yīng)的WeakMap，參見(jiàn)上述WeakSet，不同之處，key必須為對(duì)象，且不能為null，否則報(bào)錯(cuò)，而value則無(wú)限制。</textarea>

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JavaScript之Set与Map的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。