13.ES6中set資料結構
阿新 • • 發佈:2020-08-12
學習set
set是ES6中的新增的資料結構,是一種建構函式,類似於陣列,但是裡面的元素都是唯一的,不重複的。
例如:
const set = new Set();
[1,2,3,4,5,2,1,2,1,2].forEach( x => set.add(x) );
for(let i of set) {
console.log(i); // 1 2 3 4 5
}
set的屬性
set的屬性包括constructor(set原型)和size(用來記錄set的大小)。
用法:Set.prototype.constructor
,Set.prototype.size
。
例如:
let set = new Set([1,2,3,2,2,2,1,2,34,4,45,523]);
console.log(set.constructor); // ƒ Set() { [native code] }
console.log(set.size); // 7
set的方法
set的操作方法
- add(val); 新增某個值
- delete(val); // 刪除某個值,返回布林值,表示結果。
- has(val); // 判斷該值是否存在於Set中。
- clear(); // 清楚所有的值
例如:
let set = new Set();
//1.add();
set.add(12).add(32);
console.log(set); // Set(2){12, 32}
// 2.delete(val);
set.delete(32);
console.log(set); // Set(1){12}
//3.has(val);
console.log(set.has(88)); // false
//4.clear();
set.clear();
console.log(set); // Set(0){}
set的遍歷方法
set
的鍵和值是同一個值。
- keys() 返回鍵名的方法
- values() 返回鍵值的方法
- entries() 返回鍵值對的方法
- forEach() 用回撥函式遍歷各個元素的方法
例如:
let set = new Set([2,2,2,1,5,34,45,33,23,32]);
for(let item of set.keys()) {
console.log(item); // // 2 1 5 34 45 33 23 32
}
for(let item of set.values()) {
console.log(item); // // 2 1 5 34 45 33 23 32
}
for(let item of set.entries()) {
console.log(item); // [2, 2][1, 1][5, 5][34, 34][45, 45][33, 33][23, 23][32, 32]
}
set.forEach((value,key) => console.log(key+ '=' +value)); // 2=2 1=1 5=5 34=34 45=45 33=33 23=23 32=32
應用
...
運算子和Array.from
以及map
和filter
都可以遍歷set結構。
...
運算子
例如:
let set = new Set('123456654321');
console.log([...set]); // ["1", "2", "3", "4", "5", "6"]
...
和陣列加起來可以去重
例如:
let arr = [1,2,3,4,6,3,3,1,3,4];
let removeRepeat = [...new Set(arr)];
console.log(removeRepeat); //[1, 2, 3, 4, 6]
map
方法
例如:
let set = new Set([1,2,3,4]);
console.log(new Set([...set].map(x => x*2))); // {2, 4, 6, 8}
filter
方法
例如:
let set = new Set([1,2,3,4]);
console.log(new Set([...set].filter(x => x%2 === 0))); // {2, 4}
Array.from
例如:
let set = new Set([1,2,3,4]);
console.log(new Set(Array.from(set, x => x*2))); // {2, 4, 6, 8}
小案例
使用這個set
可以實現數學中的交集,並集效果。
例如:
let a = new Set([1,2,3]);
let b = new Set([3,4,5]);
let numa = new Set([...a,...b]);
console.log(numa); // {1, 2, 3, 4, 5}
//並集
let numb = new Set([...a].filter(x => b.has(x)));
console.log(numb); // {3}
學習WeakSet
WeakSet和Set類似,也是沒有重複的值。注意的是,它裡面的成員只能是物件,其他資料型別不接受。
例如:
let ws = new WeakSet(1); // Uncaught TypeError: number 1 is not iterable (cannot read property Symbol(Symbol.iterator))
let wsa = new WeakSet('1'); // Uncaught TypeError: Invalid value used in weak set
let wsb = new WeakSet({x:1}); // Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
let wsc = new WeakSet([1,3]); // Uncaught TypeError: Invalid value used in weak set
let wsc = new WeakSet([[1,2],[3,4]]);
console.log(wsc); // WeakSet{Array(2), Array(2)}
結論:從上面的例子中,可以看出1.WeakSet
建構函式的引數不接受字串,數字,普通物件,陣列(陣列中的引數必須是物件);接受陣列(陣列中的引數是物件的陣列)。
WeakSet的方法
WeakSet.prototype.add(val)
新增一個值;WeakSet.prototype.delete(val)
刪除一個值;WeakSet.prototype.has(val)
是否有這個值;
例如:
let wset = new WeakSet([[1,3,4],[23,4,52,2]]);
//1.新增值
wset.add([12,33,23]);
console.log(wset); // WeakSet{Array(3), Array(4), Array(3)}
//2.刪除值
wset.delete([12,33,23]);
console.log(wset); // WeakSet{Array(4), Array(3)}
//3.是否有這個值
console.log(wset.has([12,33,23])); // false
WeakSet的屬性
由於WeakSet中的值都是弱屬性,隨時可能消失,被垃圾回收,遍歷機制無法保證值是否還存在,所以不能用size
和forEach()
。
例如:
let wset = new WeakSet([[1,3,4],[23,4,52,2]]);
console.log(wset.size); // undefined
for(let i=0;i<wset.length;i++) {
console.log(wset[i]);
}