圖片來自簡書
Set
先來看下Set的知識結(jié)構(gòu)圖
圖片來自簡書
下面主要講解下set的基本用法和遍歷相關(guān)的知識點
Set基本用法
Set 本身是一個構(gòu)造函數(shù)柴我，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)堪伍。new Set()初始化
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
Set 實例的方法
- add(value)：添加某個值锚烦，返回Set結(jié)構(gòu)本身。
- delete(value)：刪除某個值帝雇，返回一個布爾值涮俄，表示刪除是否成功。
- has(value)：返回一個布爾值尸闸，表示該值是否為Set的成員彻亲。
- clear()：清除所有成員，沒有返回值吮廉。
s.add(1).add(2).add(2);
// 注意2被加入了兩次
s.size // 2
s.has(1) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
去除數(shù)組重復(fù)成員的方法總結(jié)
- Set 函數(shù)初始化
[...new Set(array)] - Array.from方法可以將 Set 結(jié)構(gòu)轉(zhuǎn)為數(shù)組睹栖。
const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items);
Set遍歷及其應(yīng)用
- 四個遍歷方法
- keys()：返回鍵名的遍歷器
- values()：返回鍵值的遍歷器
- entries()：返回鍵值對的遍歷器
- forEach()：使用回調(diào)函數(shù)遍歷每個成員
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
// forEach()
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
還可以用for...of循環(huán)遍歷 Set。
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
console.log(x);
}
// red
// green
// blue
- 遍歷的應(yīng)用
結(jié)合擴(kuò)展運(yùn)算符一起使用茧痕，去除數(shù)組的重復(fù)成員
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
數(shù)組的map和filter方法也可以用于Set
let set = new Set([1,2,3]);
set = new Set([...set]).map(x => x * 2));
// {2, 4, 6}
let set = new Set([1,2,3,4,5]);
set = new Set([...set].filter(x => (x % 2) == 0 ));
// {2, 4}
實現(xiàn)并集（Union）野来、交集（Intersect）和差集（Difference）。
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
WeakSet
它與 Set 有兩個區(qū)別踪旷。
首先曼氛，WeakSet 的成員只能是對象豁辉，而不能是其他類型的值。
其次舀患，WeakSet 中的對象都是弱引用徽级，即垃圾回收機(jī)制不考慮 WeakSet 對該對象的引用
Map
先來看下Map的知識結(jié)構(gòu)圖
圖片來自簡書
下面主要介紹下Map的基本用法、遍歷方法和與其他數(shù)據(jù)結(jié)構(gòu)的相互轉(zhuǎn)換
基本用法
定義
Object 結(jié)構(gòu)提供了“字符串—值”的對應(yīng)聊浅，Map結(jié)構(gòu)提供了“值—值”的對應(yīng)餐抢，是一種更完善的 Hash 結(jié)構(gòu)實現(xiàn)，比Object更適合的“鍵值對”的數(shù)據(jù)結(jié)構(gòu)低匙。實例的屬性和操作方法
- size屬性 返回 Map 結(jié)構(gòu)的成員總數(shù)旷痕。
- set(key, value)
- get(key) 找不到key，返回undefined
- has(key)
- delete(key 刪除失敗顽冶，返回false欺抗。
- clear() 清除所有成員，沒有返回值
const map = new Map();
map.set('foo', 'a);
map.set('bar', 'b);
map.size // 2
map.get('foo') // a
map.clear()
map.size // 0
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
遍歷方法
- keys()：返回鍵名的遍歷器强重。
- values()：返回鍵值的遍歷器绞呈。
- entries()：返回所有成員的遍歷器。
- forEach()：遍歷 Map 的所有成員间景。
Map 結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)佃声，比較快速的方法是使用擴(kuò)展運(yùn)算符（...）。
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
與其他數(shù)據(jù)結(jié)構(gòu)的互相轉(zhuǎn)換
- Map 轉(zhuǎn)為數(shù)組
使用擴(kuò)展運(yùn)算符（...） - 數(shù)組 轉(zhuǎn)為 Map
將數(shù)組傳入 Map 構(gòu)造函數(shù)倘要，就可以轉(zhuǎn)為 Map圾亏。
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
- Map 轉(zhuǎn)為對象
如果所有 Map 的鍵都是字符串，它可以轉(zhuǎn)為對象碗誉。
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }
- 對象轉(zhuǎn)為 Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
- Map 轉(zhuǎn)為 JSON
Map 轉(zhuǎn)為 JSON 要區(qū)分兩種情況。一種情況是父晶，Map 的鍵名都是字符串哮缺，這時可以選擇轉(zhuǎn)為對象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
另一種情況是甲喝，Map 的鍵名有非字符串尝苇，這時可以選擇轉(zhuǎn)為數(shù)組 JSON。
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
- JSON 轉(zhuǎn)為 Map
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
WeakMap
WeakMap與Map的區(qū)別有兩點埠胖。
首先糠溜，WeakMap只接受對象作為鍵名（null除外），不接受其他類型的值作為鍵名
其次直撤，WeakMap的鍵名所指向的對象非竿，不計入垃圾回收機(jī)制。
