Set、Map及數組去重

https://cloud.tencent.com/developer/article/1437254

https://blog.csdn.net/weixin_34247299/article/details/88760941

深入理解：ES6中的Set和Map數據結構，Map與其它數據結構的互相轉換

• javascript
 
• es6

文中的內容主要是來自於阮一峰的《ES6標准入門》（第三版）。《學習ES6筆記──工作中常用到的ES6語法》只是簡單提及Set和Map，今天有空於是寫了這篇文章──《深入理解：ES6中的Set和Map數據結構，Map與其它數據結構的互相轉換》。

ES6 的 Set:

ES6 提供了新的數據結構──Set。它類似於數組，但是成員的值都是唯一的，沒有重復的值。
Set 本身是一個構造函數，用來生成 Set 數據結構。
Array和Set對比
都是一個存儲多值的容器，兩者可以互相轉換，但是在使用場景上有區別。如下:
①Array的indexOf方法比Set的has方法效率低下
②Set不含有重復值（可以利用這個特性實現對一個數組的去重）
③Set通過delete方法刪除某個值，而Array只能通過splice。兩者的使用方便程度前者更優
④Array的很多新方法map、filter、some、every等是Set沒有的（但是通過兩者可以互相轉換來使用）

Set

Set對象允許你存儲任何類型的值，無論是原始值或者是對象引用。它類似於數組，但是成員的值都是唯一的，沒有重復的值。

Set 本身是一個構造函數，用來生成Set 數據結構。Set函數可以接受一個數組（或者具有 iterable 接口的其他數據結構）作為參數，用來初始化。

Set中的特殊值

Set 對象存儲的值總是唯一的，所以需要判斷兩個值是否恆等。有幾個特殊值需要特殊對待：

• +0 與 -0 在存儲判斷唯一性的時候是恆等的，所以不重復
• undefined 與 undefined 是恆等的，所以不重復
• NaN 與 NaN 是不恆等的，但是在 Set 中認為NaN與NaN相等，所有只能存在一個，不重復。

Set實例對象的屬性

• size：返回Set實例的成員總數。

Set實例對象的方法

• add(value)：添加某個值，返回 Set 結構本身(可以鏈式調用)。
• delete(value)：刪除某個值，刪除成功返回true，否則返回false。
• has(value)：返回一個布爾值，表示該值是否為Set的成員。
• clear()：清除所有成員，沒有返回值。

const mySet = new Set(['a', 'a', 'b', 1, 2, 1]) console.log(mySet) // {'a', 'b', 1, 2} myset.add('c').add({'a': 1}) console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}} console.log(mySet.size) // 6 mySet.has(2) // true

遍歷方法

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

由於Set結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以keys方法和values方法的行為完全一致。

const set = new Set(['a', 'b', 'c']) for (let item of set.keys()) { console.log(item) } // a // b // c for (let item of set.values()) { console.log(item) } // a // b // c for (let item of set.entries()) { console.log(item) } // ["a", "a"] // ["b", "b"] // ["c", "c"] // 直接遍歷set實例，等同於遍歷set實例的values方法 for (let i of set) { console.log(i) } // a // b // c set.forEach((value, key) => console.log(key + ' : ' + value)) // a: a // b: b // c: c

Set 對象作用

數組去重(利用擴展運算符)

1.
const mySet = new Set([1, 2, 3, 4, 4]) [...mySet] // [1, 2, 3, 4]

2.

function unique(arr) { //通過Set對象，對數組去重，結果又返回一個Set對象 //通過from方法，將Set對象轉為數組 return Array.from(new Set(arr)) }

• 合並兩個set對象

let a = new Set([1, 2, 3]) let b = new Set([4, 3, 2]) let union = new Set([...a, ...b]) // {1, 2, 3, 4}

• 交集

let a = new Set([1, 2, 3]) let b = new Set([4, 3, 2]) let intersect = new Set([...a].filter(x => b.has(x))) // {2, 3} 利用數組的filter方法

• 差集

let a = new Set([1, 2, 3]) let b = new Set([4, 3, 2]) let difference = new Set([...a].filter(x => !b.has(x))) // {1} 

WeakSet

WeakSet結構與Set類似，它與Set有兩個區別：
①weakSet的成員只能是對象，不能是其他類型的值；
②weakSet對象都是弱引用。如果其它對象不再引用該對象，那么垃圾回收機制會自動回收該對象所占的內存，所以WeakSet是不可遍歷的。

WeakSet 結構有以下三個方法：
WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。
WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在 WeakSet 實例之中。
WeakSet的一個用處是儲存DOM節點，而不用擔心這些節點會從文檔中移除時，會引發內存泄露。

ES6的Map:

Map

Map對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。構造函數Map可以接受一個數組作為參數。

Map和Object的區別

• 一個Object 的鍵只能是字符串或者 Symbols，但一個Map 的鍵可以是任意值。
• Map中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是。
• Map的鍵值對個數可以從 size 屬性獲取，而 Object 的鍵值對個數只能手動計算。
• Object 都有自己的原型，原型鏈上的鍵名有可能和你自己在對象上的設置的鍵名產生沖突。

Map對象的屬性

• size：返回Map對象中所包含的鍵值對個數

Map對象的方法

• set(key, val): 向Map中添加新元素
• get(key): 通過鍵值查找特定的數值並返回
• has(key): 判斷Map對象中是否有Key所對應的值，有返回true,否則返回false
• delete(key): 通過鍵值從Map中移除對應的數據
• clear(): 將這個Map中的所有元素刪除

const m1 = new Map([['a', 111], ['b', 222]]) console.log(m1) // {"a" => 111, "b" => 222} m1.get('a') // 111 const m2 = new Map([['c', 3]]) const m3 = new Map(m2) m3.get('c') // 3 m3.has('c') // true m3.set('d', 555) m3.get('d') // 555

遍歷方法

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

const map = new Map([['a', 1], ['b', 2]]) for (let key of map.keys()) { console.log(key) } // "a" // "b" for (let value of map.values()) { console.log(value) } // 1 // 2 for (let item of map.entries()) { console.log(item) } // ["a", 1] // ["b", 2] // 或者 for (let [key, value] of map.entries()) { console.log(key, value) } // "a" 1 // "b" 2 // for...of...遍歷map等同於使用map.entries() for (let [key, value] of map) { console.log(key, value) } // "a" 1 // "b" 2

數組去重

function unique(arr) { //定義常量 res,值為一個Map對象實例 const res = new Map(); //返回arr數組過濾后的結果，結果為一個數組 //過濾條件是，如果res中沒有某個鍵，就設置這個鍵的值為1 return arr.filter((a) => !res.has(a) && res.set(a, 1)) }

map與其他數據結構的互相轉換

1.Map 轉為數組：
Map 轉為數組最方便的方法，就是使用擴展運算符（...）。

const myMap = new Map() .set(true, 7) .set({foo: 3}, ['abc']); [...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ] 

2.數組 轉為 Map：
將數組傳入 Map 構造函數，就可以轉為 Map。

new Map([ [true, 7], [{foo: 3}, ['abc']] ]) // Map { // true => 7, // Object {foo: 3} => ['abc'] // } 

3.Map 轉為對象：
如果所有 Map 的鍵都是字符串，它可以轉為對象。

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 } 

4.對象轉為 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} 

5.Map 轉為 JSON：
Map 轉為 JSON 要區分兩種情況。一種情況是，Map 的鍵名都是字符串，這時可以選擇轉為對象 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 的鍵名有非字符串，這時可以選擇轉為數組 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"]]]' 

6.JSON 轉為 Map：
JSON 轉為 Map，正常情況下，所有鍵名都是字符串。

function jsonToStrMap(jsonStr) { return objToStrMap(JSON.parse(jsonStr)); } jsonToStrMap('{"yes": true, "no": false}') // Map {'yes' => true, 'no' => false}

但是，有一種特殊情況，整個 JSON 就是一個數組，且每個數組成員本身，又是一個有兩個成員的數組。這時，它可以一一對應地轉為 Map。這往往是數組轉為 JSON 的逆操作。

 

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結構類似，也是用於生成鍵值對的集合。

// WeakMap 可以使用 set 方法添加成員 const wm1 = new WeakMap(); const key = {foo: 1}; wm1.set(key, 2); wm1.get(key) // 2 // WeakMap 也可以接受一個數組， // 作為構造函數的參數 const k1 = [1, 2, 3]; const k2 = [4, 5, 6]; const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]); wm2.get(k2) // "bar"

WeakMap與Map的區別有兩點：
首先，WeakMap只接受對象作為鍵名（null除外），不接受其他類型的值作為鍵名。

const map = new WeakMap(); map.set(1, 2) // TypeError: 1 is not an object! map.set(Symbol(), 2) // TypeError: Invalid value used as weak map key map.set(null, 2) // TypeError: Invalid value used as weak map key

上面代碼中，如果將數值1和Symbol值作為 WeakMap 的鍵名，都會報錯。其次，WeakMap的鍵名所指向的對象，不計入垃圾回收機制。
WeakMap的設計目的在於，有時我們想在某個對象上面存放一些數據，但是這會形成對於這個對象的引用。請看下面的例子。

const e1 = document.getElementById('foo'); const e2 = document.getElementById('bar'); const arr = [ [e1, 'foo 元素'], [e2, 'bar 元素'], ];

上面代碼中，e1和e2是兩個對象，我們通過arr數組對這兩個對象添加一些文字說明。這就形成了arr對e1和e2的引用。一旦不再需要這兩個對象，我們就必須手動刪除這個引用，否則垃圾回收機制就不會釋放e1和e2占用的內存。

// 不需要 e1 和 e2 的時候 // 必須手動刪除引用 arr [0] = null; arr [1] = null; 

 

數組去重-Map實現 

問題由來

遇到一道面試題：找到數組中第一個非重復的數。

[ 1, 1, 2, 2, 3, 4, 4, 5 ]
第一個非重復的數為 3

最簡單的想法就是兩層 for 循環遍歷數組，這樣的時間復雜度是 O(n^2)。而更高效的方式，是使用hash Map，可將時間復雜降為O(n)。

其實這個題目可以衍生出三個類似的問題：

1. 數組去重
2. 找到數組中重復的數
3. 找到數組中第一個非重復的數

我准備用ES6中的 Map數據結構來解決這三個問題，在這之前有必要先梳理下Map的主要知識點。

Map基礎梳理

JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。為了解決這個問題，ES6 提供了 Map 數據結構。它類似於對象，也是鍵值對的集合，但是“鍵”的范圍不限於字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。

例如Map構造函數接受一個數組作為其參數：

1.  
   const map = new Map([
2.  
   [ 1, '張三'],
3.  
   [ 2, '李四']
4.  
   ]);
5.  
   // 0:{1 => "張三"}
6.  
   // 1:{2 => "李四"}

Map實例的屬性和操作方法：

• size：返回成員總數
• set(key, value)：添加新的鍵值
• get(key)：讀取鍵對應的值
• has(key)：是否有某個鍵
• delete(key)：刪除某個鍵
• clear()：清空

Map實例的遍歷方法：

• keys()：返回鍵名的遍歷器。
• values()：返回鍵值的遍歷器。
• entries()：返回鍵值對的遍歷器。
• forEach()：遍歷 Map 的所有成員。

下面來通過代碼解決三個問題：

數組去重

去重前：[ 1, 1, 2, 2, 3, 4, 4, 5 ]
去重后：[ 1, 2, 3, 4, 5 ]

主要思路：創建一個空Map，遍歷原始數組，把數組的每一個元素作為key存到Map中，因為Map中不會出現相同的key值，所以最終得到的Map中的所有key值就是去重后的結果。

1.  
   function arrayNonRepeatfy(arr) {
2.  
   let hashMap = new Map();
3.  
   let result = new Array(); // 數組用於返回結果
4.  
   for (let i = 0; i < arr.length; i++) {
5.  
   if(hashMap.has(arr[i])) { // 判斷 hashMap 中是否已有該 key 值
6.  
   hashMap.set(arr[i], true); // 后面的true 代表該 key 值在原始數組中重復了，false反之
7.  
   } else { // 如果 hashMap 中沒有該 key 值，添加
8.  
   hashMap.set(arr[i], false);
9.  
   result.push(arr[i]);
10.  
    }
11.  
    }
12.  
    return result;
13.  
    }
14.  
     
15.  
    let arr = [1, 1, 1, 2, 3, 3, 4, 5, 5, "a", "b", "a"];
16.  
    console.log(arrayNonRepeatfy(arr)); // [ 1, 2, 3, 4, 5, 'a', 'b' ]

上面最終產生的Map不僅可以達到去重的效果，而且對每一元素的重復性都做了標注，這樣想找到找到數組中重復的數就很方便了：

1.  
   console. log(hashMap);
2.  
   /*
3.  
   0:{1 => true} {key: 1, value: true}
4.  
   1:{2 => false} {key: 2, value: false}
5.  
   2:{3 => true} {key: 3, value: true}
6.  
   3:{4 => false} {key: 4, value: false}
7.  
   4:{5 => true} {key: 5, value: true}
8.  
   5:{"a" => true} {key: "a", value: true}
9.  
   6:{"b" => false} {key: "b", value: false}
10.  
    */

找到數組中重復的數

[ 1, 1, 2, 2, 3, 4, 4, 5 ]
[ 1, 2, 4 ]
接上一節末尾，既然 hashMap中記錄了每一個元素的重復情況，找到重復的數就很簡單了，遍歷最終得到的 hashMap，值為  true 對應的鍵就是重復的數：

1.  
   function findRepeatNumInArray(arr) {
2.  
   let hashMap = new Map();
3.  
   let result = new Array();
4.  
   for (let i = 0; i < arr.length; i++) {
5.  
   hashMap.set(arr[i], hashMap.has(arr[i]))
6.  
   }
7.  
   // 得到 hashMap 后，對其進行遍歷，值為 true，對應的鍵就是重復的數
8.  
   for(let [key, value] of hashMap.entries()) {
9.  
   if(value === true) {
10.  
    result.push(key);
11.  
    }
12.  
    }
13.  
    return result;
14.  
    }
15.  
     
16.  
    let arr = [1, 1, 1, 2, 3, 3, 4, 5, 5, "a", "b", "a"];
17.  
    console.log(findRepeatNumInArray(arr));

找到數組中第一個非重復的數

[ 1, 1, 2, 2, 3, 4, 4, 5 ]
3
代碼與上一節的差不多，遍歷最終得到的 hashMap，第一個值為  false 對應的鍵就是第一個非重復數字:

1.  
   function findFirstNonRepeat(arr) {
2.  
   let hashMap = new Map();
3.  
   for (let i = 0; i < arr.length; i++) {
4.  
   hashMap.set(arr[i], hashMap.has(arr[i]))
5.  
   }
6.  
   // 找到第一個值為 false 的，就代表第一個非重復數，return 就好了
7.  
   for(let [key, value] of hashMap.entries()) {
8.  
   if(value === false) {
9.  
   return key;
10.  
    }
11.  
    }
12.  
    return "全部重復";
13.  
    }
14.  
     
15.  
    let arr = [1, 1, 1, 2, 3, 3, 4, 5, 5, "a", "b", "a"];
16.  
    console.log(findFirstNonRepeat(arr));

總結，三類問題的核心其實就是：利用 Map 存儲每一個數字的重復情況。