ES6 Map 與 Set
阿新 • • 發佈:2022-03-21
Map
是一組鍵值對的結構,具有極快的查詢速度。
舉個例子,假設要根據同學的名字查詢對應的成績,如果用Array
實現,需要兩個Array
:
var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85];
給定一個名字,要查詢對應的成績,就先要在names中找到對應的位置,再從scores取出對應的成績,Array越長,耗時越長。
如果用Map實現,只需要一個“名字”-“成績”的對照表,直接根據名字查詢成績,無論這個表有多大,查詢速度都不會變慢。用JavaScript寫一個Map如下:
var m = newMap([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael'); // 95
初始化Map
需要一個二維陣列,或者直接初始化一個空Map
。Map
具有以下方法:
var m = new Map(); // 空Map m.set('Adam', 67); // 新增新的key-value m.set('Bob', 59); m.has('Adam'); // 是否存在key 'Adam': true m.get('Adam'); // 67 m.delete('Adam'); // 刪除key 'Adam' m.get('Adam'); //undefined
由於一個key只能對應一個value,所以,多次對一個key放入value,後面的值會把前面的值沖掉
var m = new Map(); m.set('Adam', 67); m.set('Adam', 88); m.get('Adam'); // 88
Map 與 Array的轉換
var kvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 建構函式可以將一個 二維 鍵值對陣列轉換成一個 Map 物件 var myMap = new Map(kvArray); // 使用 Array.from 函式可以將一個 Map 物件轉換成一個二維鍵值對陣列var outArray = Array.from(myMap);
Map 的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); var myMap2 = new Map(myMap1); console.log(original === clone); // 列印 false。 Map 物件建構函式生成例項,迭代出新的物件。
Map 的合併
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]); var second = new Map([[1, 'uno'], [2, 'dos']]); // 合併兩個 Map 物件時,如果有重複的鍵值,則後面的會覆蓋前面的,對應值即 uno,dos, three var merged = new Map([...first, ...second]);
Set:
Set
和Map
類似,也是一組key的集合,但不儲存value。由於key不能重複,所以,在Set
中,沒有重複的key。
要建立一個Set
,需要提供一個Array
作為輸入,或者直接建立一個空Set
:
var s1 = new Set(); // 空Set var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重複元素在Set
中自動被過濾:
var s = new Set([1, 2, 3, 3, '3']); s; // Set {1, 2, 3, "3"}
注意數字3
和字串'3'
是不同的元素。
通過add(key)
方法可以新增元素到Set
中,可以重複新增,但不會有效果:
s.add(4); s; // Set {1, 2, 3, 4} s.add(4); s; // 仍然是 Set {1, 2, 3, 4}
通過delete(key)
方法可以刪除元素:
var s = new Set([1, 2, 3]); s; // Set {1, 2, 3} s.delete(3); s; // Set {1, 2}
型別轉換
Array
// Array 轉 Set var mySet = new Set(["value1", "value2", "value3"]); // 用...操作符,將 Set 轉 Array var myArray = [...mySet]; String // String 轉 Set var mySet = new Set('hello'); // Set(4) {"h", "e", "l", "o"} // 注:Set 中 toString 方法是不能將 Set 轉換成 String
Set 物件作用
陣列去重
var mySet = new Set([1, 2, 3, 4, 4]); [...mySet]; // [1, 2, 3, 4]
並集
var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var union = new Set([...a, ...b]); // {1, 2, 3, 4}
交集
var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
差集
var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var difference = new Set([...a].filter(x => !b.has(x))); // {1}
小結
Map
和Set
是ES6標準新增的資料型別,請根據瀏覽器的支援情況決定是否要使用