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

?

?

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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript之Set与Map的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。