## 一、set 1、定義 ES6 提供了新的數據結構 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 ``` Set函數可以接受一個數組（或者具有 iterable 接口的其他數據結構）作為參數，用來初始化。 ``` // 例一 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 // 例三 const set = new Set(document.querySelectorAll('div')); set.size // 56 // 類似于 const set = new Set(); document .querySelectorAll('div') .forEach(div => set.add(div)); set.size // 56 ``` 2、屬性 Set 結構的實例有以下屬性。 ``` Set.prototype.constructor：構造函數，默認就是Set函數。 Set.prototype.size：返回Set實例的成員總數。 ``` 3、方法 Set 實例的方法分為兩大類：操作方法（用于操作數據）和遍歷方法（用于遍歷成員） ``` Set.prototype.add(value)：添加某個值，返回 Set 結構本身。 Set.prototype.delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。 Set.prototype.has(value)：返回一個布爾值，表示該值是否為Set的成員。 Set.prototype.clear()：清除所有成員，沒有返回值。 ``` ``` Set.prototype.keys()：返回鍵名的遍歷器 Set.prototype.values()：返回鍵值的遍歷器 Set.prototype.entries()：返回鍵值對的遍歷器 Set.prototype.forEach()：使用回調函數遍歷每個成員 ``` ## 二、map JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。了解決這個問題，ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構，Map 比 Object 更合適。 1、定義 作為構造函數，Map 也可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組。 ``` 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 ``` 2、屬性 ``` size 屬性 ``` `size`屬性返回 Map 結構的成員總數。 ~~~javascript const map = new Map(); map.set('foo', true); map.set('bar', false); map.size // 2 ~~~ 3、方法 ``` Map.prototype.set(key, value) Map.prototype.get(key) Map.prototype.has(key) Map.prototype.delete(key) Map.prototype.clear() ``` ``` Map.prototype.keys()：返回鍵名的遍歷器。 Map.prototype.values()：返回鍵值的遍歷器。 Map.prototype.entries()：返回所有成員的遍歷器。 Map.prototype.forEach()：遍歷 Map 的所有成員。 ``` 4、與其他數據結構互換 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：對象轉為 Map 可以通過Object.entries()。 ``` let obj = {"a":1, "b":2}; let map = new Map(Object.entries(obj)); ``` 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} ```