Set 和 Map 數據結構 · 前端筆記

[TOC] ## Set ### 概述 ES6 提供了新的數據結構 Set。Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。 Set 本身是一個構造函數，用來生成 Set 數據結構。對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。 ~~~ const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 s // Set {2, 3, 5, 4} ~~~ ### 語法 > new Set([iterable]); 參數 * iterable 如果傳遞一個可迭代對象，它的所有元素將被添加到新的 Set中。如果不指定此參數或其值為null，則新的 Set為空。返回值一個新的Set對象。 ~~~ // 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 function divs () { return [...document.querySelectorAll('div')]; } const set = new Set(divs()); set.size // 56 // 類似于 divs().forEach(div => set.add(div)); set.size // 56 ~~~ **值的相等** 因為 Set 中的值總是唯一的，所以需要判斷兩個值是否相等。在ECMAScript規范的早期版本中，這不是基于和===操作符中使用的算法相同的算法。具體來說，對于 Set s， +0 （+0 嚴格相等于-0）和-0是不同的值。另外，NaN和undefined都可以被存儲在Set 中， NaN之間被視為相同的值（盡管 NaN !== NaN）。 ### 屬性 * Set.length length屬性的值為0。 * get Set[@@species] 構造函數用來創建派生對象. * Set.prototype 表示Set構造器的原型，允許向所有Set對象添加新的屬性。 ### 方法 Set 實例的方法分為兩大類：操作方法（用于操作數據）和遍歷方法（用于遍歷成員）。操作方法 * add(value)：添加某個值，返回 Set 結構本身。 * delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。 * has(value)：返回一個布爾值，表示該值是否為Set的成員。 * clear()：清除所有成員，沒有返回值。 ~~~ 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"] ~~~ ~~~ 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))); // Set {1} ~~~ 遍歷方法 * keys()：返回鍵名的遍歷器 * values()：返回鍵值的遍歷器 * entries()：返回鍵值對的遍歷器 * forEach()：使用回調函數遍歷每個成員 ## WeakSet ### 概述 WeakMap 對象是一組鍵/值對的集合，其中的鍵是弱引用的。其鍵必須是對象，而值可以是任意的。 WeakSet 中的對象都是弱引用，即垃圾回收機制不考慮 WeakSet 對該對象的引用，也就是說，如果其他對象都不再引用該對象，那么垃圾回收機制會自動回收該對象所占用的內存，不考慮該對象還存在于 WeakSet 之中。這是因為垃圾回收機制依賴引用計數，如果一個值的引用次數不為0，垃圾回收機制就不會釋放這塊內存。結束使用該值之后，有時會忘記取消引用，導致內存無法釋放，進而可能會引發內存泄漏。WeakSet 里面的引用，都不計入垃圾回收機制，所以就不存在這個問題。因此，WeakSet 適合臨時存放一組對象，以及存放跟對象綁定的信息。只要這些對象在外部消失，它在 WeakSet 里面的引用就會自動消失。由于上面這個特點，WeakSet 的成員是不適合引用的，因為它會隨時消失。另外，由于 WeakSet 內部有多少個成員，取決于垃圾回收機制有沒有運行，運行前后很可能成員個數是不一樣的，而垃圾回收機制何時運行是不可預測的，因此 ES6 規定 WeakSet 不可遍歷。 ### 語法 > new WeakMap([iterable]) 參數 * iterable Iterable 是一個數組（2元數組）或者可遍歷的且其元素是鍵值對的對象。每個鍵值對會被加到新的 WeakMap 里。null 會被當做 undefined。 WeakSet 是一個構造函數，可以使用new命令，創建 WeakSet 數據結構。 ~~~ const ws = new WeakSet(); ~~~ 作為構造函數，WeakSet 可以接受一個數組或類似數組的對象作為參數。（實際上，任何具有 Iterable 接口的對象，都可以作為 WeakSet 的參數。）該數組的所有成員，都會自動成為 WeakSet 實例對象的成員。 ~~~ const a = [[1, 2], [3, 4]]; const ws = new WeakSet(a); // WeakSet {[1, 2], [3, 4]} ~~~ 上面代碼中，a是一個數組，它有兩個成員，也都是數組。將a作為 WeakSet 構造函數的參數，a的成員會自動成為 WeakSet 的成員。注意，是a數組的成員成為 WeakSet 的成員，而不是a數組本身。這意味著，數組的成員只能是對象。 ~~~ const b = [3, 4]; const ws = new WeakSet(b); // Uncaught TypeError: Invalid value used in weak set(…) ~~~ 上面代碼中，數組b的成員不是對象，加入 WeaKSet 就會報錯。 ### 方法 * WeakMap.prototype.delete(key) 移除key的關聯對象。執行后 WeakMap.prototype.has(key)返回false。 * WeakMap.prototype.get(key) 返回key關聯對象, 或者 undefined(沒有key關聯對象時)。 * WeakMap.prototype.has(key) 根據是否有key關聯對象返回一個Boolean值。 * WeakMap.prototype.set(key, value) 在WeakMap中設置一組key關聯對象，返回這個 WeakMap對象。 ~~~ const ws = new WeakSet(); const obj = {}; const foo = {}; ws.add(window); ws.add(obj); ws.has(window); // true ws.has(foo); // false ws.delete(window); ws.has(window); // false ~~~ WeakSet 沒有size屬性，沒有辦法遍歷它的成員。 ~~~ ws.size // undefined ws.forEach // undefined ws.forEach(function(item){ console.log('WeakSet has ' + item)}) // TypeError: undefined is not a function ~~~ WeakSet 不能遍歷，是因為成員都是弱引用，隨時可能消失，遍歷機制無法保證成員的存在，很可能剛剛遍歷結束，成員就取不到了。WeakSet 的一個用處，是儲存 DOM 節點，而不用擔心這些節點從文檔移除時，會引發內存泄漏。 ## Map ### 概述 JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。 ~~~ const data = {}; const element = document.getElementById('myDiv'); data[element] = 'metadata'; data['[object HTMLDivElement]'] // "metadata" ~~~ 上面代碼原意是將一個 DOM 節點作為對象data的鍵，但是由于對象只接受字符串作為鍵名，所以element被自動轉為字符串[object HTMLDivElement]。為了解決這個問題，ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構，Map 比 Object 更合適。 ~~~ const m = new Map(); const o = {p: 'Hello World'}; m.set(o, 'content') m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false ~~~ ### 語法作為構造函數，Map 也可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組。 ~~~ const map = new Map([ ['name', '張三'], ['title', 'Author'] ]); map.size // 2 map.has('name') // true map.get('name') // "張三" map.has('title') // true map.get('title') // "Author" ~~~ 注意，只有對同一個對象的引用，Map 結構才將其視為同一個鍵。 ~~~ const map = new Map(); map.set(['a'], 555); map.get(['a']) // undefined ~~~ 上面代碼的set和get方法，表面是針對同一個鍵，但實際上這是兩個值，內存地址是不一樣的，因此get方法無法讀取該鍵，返回undefined。 Map 的鍵實際上是跟內存地址綁定的，只要內存地址不一樣，就視為兩個鍵。這就解決了同名屬性碰撞（clash）的問題，我們擴展別人的庫的時候，如果使用對象作為鍵名，就不用擔心自己的屬性與原作者的屬性同名。如果 Map 的鍵是一個簡單類型的值（數字、字符串、布爾值），則只要兩個值嚴格相等，Map 將其視為一個鍵，比如0和-0就是一個鍵，布爾值true和字符串true則是兩個不同的鍵。另外，undefined和null也是兩個不同的鍵。雖然NaN不嚴格相等于自身，但 Map 將其視為同一個鍵。 ### 屬性 * size size屬性返回 Map 結構的成員總數。 ### 方法 **操作方法** * set(key, value) set方法設置鍵名key對應的鍵值為value，然后返回整個 Map 結構。如果key已經有值，則鍵值會被更新，否則就新生成該鍵。 ~~~ const m = new Map(); m.set('edition', 6) // 鍵是字符串 m.set(262, 'standard') // 鍵是數值 m.set(undefined, 'nah') // 鍵是 undefined ~~~ set方法返回的是當前的Map對象，因此可以采用鏈式寫法。 ~~~ let map = new Map() .set(1, 'a') .set(2, 'b') .set(3, 'c'); ~~~ * get(key) get方法讀取key對應的鍵值，如果找不到key，返回undefined。 ~~~ const m = new Map(); const hello = function() {console.log('hello');}; m.set(hello, 'Hello ES6!') // 鍵是函數 m.get(hello) // Hello ES6! ~~~ * has(key) has方法返回一個布爾值，表示某個鍵是否在當前 Map 對象之中。 ~~~ const m = new Map(); m.set('edition', 6); m.set(262, 'standard'); m.set(undefined, 'nah'); m.has('edition') // true m.has('years') // false m.has(262) // true m.has(undefined) // true ~~~ * delete(key) delete方法刪除某個鍵，返回true。如果刪除失敗，返回false。 ~~~ const m = new Map(); m.set(undefined, 'nah'); m.has(undefined) // true m.delete(undefined) m.has(undefined) // false ~~~ * clear() clear方法清除所有成員，沒有返回值。 ~~~ let map = new Map(); map.set('foo', true); map.set('bar', false); map.size // 2 map.clear() map.size // 0 ~~~ **遍歷方法** * keys()：返回鍵名的遍歷器。 * values()：返回鍵值的遍歷器。 * entries()：返回所有成員的遍歷器。 * forEach()：遍歷 Map 的所有成員。 ### 與其他數據結構的互相轉換 * Map 轉為數組前面已經提過，Map 轉為數組最方便的方法，就是使用擴展運算符（...）。 ~~~ const myMap = new Map() .set(true, 7) .set({foo: 3}, ['abc']); [...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ] ~~~ * 數組轉為 Map 將數組傳入 Map 構造函數，就可以轉為 Map。 ~~~ new Map([ [true, 7], [{foo: 3}, ['abc']] ]) // Map { // true => 7, // Object {foo: 3} => ['abc'] // } ~~~ * 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 } ~~~ * 對象轉為 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 轉為 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"]]]' ~~~ * 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"]]]') ~~~ ## WeakMap WeakMap結構與Map結構類似，也是用于生成鍵值對的集合。WeakMap與Map的區別有兩點。 * WeakMap只接受對象作為鍵名（null除外），不接受其他類型的值作為鍵名。 * WeakMap的鍵名所指向的對象，不計入垃圾回收機制。 ~~~ // 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的設計目的在于，有時我們想在某個對象上面存放一些數據，但是這會形成對于這個對象的引用。 ~~~ 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; ~~~ 上面這樣的寫法顯然很不方便。一旦忘了寫，就會造成內存泄露。基本上，如果你要往對象上添加數據，又不想干擾垃圾回收機制，就可以使用 WeakMap。一個典型應用場景是，在網頁的 DOM 元素上添加數據，就可以使用WeakMap結構。當該 DOM 元素被清除，其所對應的WeakMap記錄就會自動被移除。 ~~~ const wm = new WeakMap(); const element = document.getElementById('example'); wm.set(element, 'some information'); wm.get(element) // "some information" ~~~ 上面代碼中，先新建一個 Weakmap 實例。然后，將一個 DOM 節點作為鍵名存入該實例，并將一些附加信息作為鍵值，一起存放在 WeakMap 里面。這時，WeakMap 里面對element的引用就是弱引用，不會被計入垃圾回收機制。 **WeakMap的專用場合就是，它的鍵所對應的對象，可能會在將來消失。WeakMap結構有助于防止內存泄漏。** ### 語法 WeakMap 與 Map 在 API 上的區別主要是兩個，一是沒有遍歷操作（即沒有key()、values()和entries()方法），也沒有size屬性。因為沒有辦法列出所有鍵名，某個鍵名是否存在完全不可預測，跟垃圾回收機制是否運行相關。這一刻可以取到鍵名，下一刻垃圾回收機制突然運行了，這個鍵名就沒了，為了防止出現不確定性，就統一規定不能取到鍵名。二是無法清空，即不支持clear方法。因此，WeakMap只有四個方法可用：get()、set()、has()、delete()。 ~~~ const wm = new WeakMap(); // size、forEach、clear 方法都不存在 wm.size // undefined wm.forEach // undefined wm.clear // undefined ~~~