set和map數據結構 —— ECMAScript 6入門讀書筆記

書籍地址: ECMAScript 6 入門

Set

簡介

Set是es6新增的數據結構,不能存儲重複的值

在Set中, NaN是相同的,將字符串作爲構造函數的參數傳入進去,會將字符串作爲一個數組

let set = new Set('hello world');
console.log(set); //Set { 'h', 'e', 'l', 'o', ' ', 'w', 'r', 'd' }

簡單使用

• 將數組去重,使用同樣的方法也可以對字符串去重

//方法一: 使用擴展運算符（...）
let arr1 = [...new Set([1, 2, 3, 4, 5, 3, 2, 4, 3])];
//方法二: 使用Array.form
let arr2 = Array.from(new Set([1, 2, 3, 4, 5, 3, 2, 4, 3]));

set遍歷

在Set中,鍵和值可以說是一樣的

Set中的遍歷方法

Set.prototype.keys()：返回鍵名的遍歷器
Set.prototype.values()：返回鍵值的遍歷器
Set.prototype.entries()：返回鍵值對的遍歷器
Set.prototype.forEach()：使用回調函數遍歷每個成員

let set = new Set('hello world');
for (let item of set.keys()) {
    console.log(item);
}
console.log("============================");
for (let item of set.values()) {
    console.log(item);
}
console.log("============================");
for (let item of set.entries()) {
    console.log(item);
}
console.log("============================");
for (let item of set) {
    console.log(item);
}
console.log("============================");
set.forEach((value, key) => {
    console.log(`value = ${value}, key = ${key}`);
});

WeakSet

WeakSet和Set一樣,存儲的值不會重複,但是隻能夠存儲對象,並且對象都是弱引用(垃坡回收機制不考慮WeakSet對該對象的引用)

let weakSet = new WeakSet([{a: 1}]);
let fo = {};
let foo = {};
let a = [1, 2, 3];
weakSet.add(fo);
weakSet.add(foo);
weakSet.add(a);
console.log(weakSet.has(fo));
console.log(weakSet.has(foo));
console.log(weakSet.has(a));

WeakSet也可以使用一個數組作爲構造函數的參數傳入進去,但是數組中的值一定要是對象,不然會報錯

WeakSet不能夠遍歷,並且只有三個方法

• has: 返回一個布爾值，表示某個值是否在 WeakSet 實例之中。

• add: 向 WeakSet 實例添加一個新成員

• delete: 清除 WeakSet 實例的指定成員。

Map

鍵值對集合,鍵可以是字符串也可以是對象,在map中,只要鍵的值嚴格相等,就看做同一個鍵(NaN除外,NaN也看做是同一個鍵)

構造函數的參數

• 可以將數組作爲構造方法的參數,該數組是一個個表示鍵值對的數組

• 將Set作爲構造函數的參數,但是set裏面的數據需要時一個個表示鍵值對的數值

• 將Map作爲構造函數的參數

let set = new Set([['a', 1], ['b', 2]]);
console.log(set);

//將set作爲map的構造函數的參數
let map = new Map(set);
map.set('c', 3);
//將map作爲構造函數的參數
let map1 = new Map(map);
console.log(map1);

map遍歷

map的遍歷和set的遍歷是一樣的

let map = new Map([['a', 1], ['b', 2]]);

for (let key of map.keys()) {
    console.log(key);
}
console.log("=========================");
for (let value of map.values()) {
    console.log(value);
}
console.log("=========================");
for (let [key, value] of map.entries()) {
    console.log(key, value);
}
console.log("=========================");
for (let [key, value] of map) {
    console.log(key, value);
}
console.log("=========================");
map.forEach((value, key, map) => {
    console.log(value, key, map);
});

map與數組的轉換

將map轉數組可以使用擴展運算符(...)

console.log([...map]); //[ [ 'a', 1 ], [ 'b', 2 ] ]
console.log([...map.keys()]); //[ 'a', 'b' ]
console.log([...map.values()]); //[ 1, 2 ]
console.log([...map.entries()]); //[ [ 'a', 1 ], [ 'b', 2 ] ]

WeakMap

• 只能以對象作爲鍵(null除外)

• 存儲的值是弱引用

• 只有set, get, has, delete四個方法