ES6學習之set和map數據結構

Set

基本用法

  ES6提供了新的數據結構Set。它相似數組，可是成員都是惟一的，不容許重複。其自己是一個構造函數，用來生成Set數據結構。

const set = new Set([1, 2, 3, 4, 4]);
const sets = new Set(document.querySelectorAll('div'));

複製代碼

  Set函數能夠接受一個數組或者具備iterable接口的其餘數據結構做爲參數，用來初始化。

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
複製代碼

  上面代碼也展現了一種去除數組重複成員的方法。

[...new Set('ababbc')].join('')
複製代碼

  上面的方法也適用於字符串去除重複的字符。==也可擴展爲字符串去除空格的方法==

[...new Set(' a ba bb c')].join('').substr(1)
複製代碼

  向Set加入值的時候，不會發生類型轉換。因此，5和'5'是兩個不相同的值。==另外，兩個對象老是不相等的。==

Set實例的屬性和方法

Set實例有如下屬性：

• Set.prototype.constructor：構造函數，默認就是Set函數。
• Set.prototype.size：返回Set實例的成員總數。

Set實例的方法分爲兩大類：操做方法（操做數據）和遍歷方法（遍歷成員）。

操做方法：

• add(value)：添加參數，返回添加以後的數據；
• delete(value)：刪除參數，返回是否刪除成功的布爾值；
• has(value)：返回判斷是否包含該成員的布爾值；
• clear(value)：清除全部參數，沒有返回值；

遍歷方法

  在阮一峯老師的《ECMAScript 6 入門》中提到了keys()、values()、entries()、forEach()四種方法。我的在工做中用到的並很少，更多的用到了for...of 遍歷方法。

  以擴展運算符做爲中間橋樑，數組的map方法和filter方法也能夠間接的用於Set。

const divS = new Set(document.querySelectorAll('.explain-item'));
let sets = [...divS].map(x => x.innerHTML = x.innerHTML + 'map拼接參數');
複製代碼

  使用map方法快速的遍歷頁面中的DOM元素，並修改其值。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 並集
let union = new Set([...a, ...b]);

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
複製代碼

  使用Set配合filter方法和擴展運算符能夠很容易的實現並集、交集和差集。

Map

  Map是一組鍵值對的結構，具備相對快的查找速度。其相似於對象，可是'鍵'的範圍不限於字符串，各類類型的值均可以均可以當作鍵。初始化Map須要一個二維數組或者直接初始化一個空Map。

const $map = new Map();

const $num = 1;
const $str = '1';
const $arr = [1, 2, 3, 4];
const $null = null;
const $undefined = undefined;
const $obj = {a: 1, b: 2}

$map.set($num, 10)
    .set($str, '10')
    .set($arr, [4, 3, 2, 1])
    .set($null, null)
    .set($undefined, undefined)
    .set($obj, {c: 3, d: 4});

複製代碼

  上面代碼展現了Map不只能夠用基礎數據類型當作鍵，甚至能夠將數據和對象當作鍵。上面代碼使用set方法向Map添加數據。map總共有下面幾種操做數據的方法。

• set(key, value)：採用鍵值對的形式向map添加數據，若是已經有該key值，則更新；不然會添加。返回當前的Map對象，所以能夠採用鏈式寫法；
• get(key)：讀取對應key的鍵值，若是沒有則會返回undefined；
• delete(key)：刪除對應key的鍵值，返回是否成功的布爾值；
• has(key)：返回是否包含某個key的布爾值；
• clear()：用於清除全部成員，沒有返回值。
• size屬性：返回map數據的成員總數。(布爾值)

遍歷

  我的感受遍歷map比較合適的方法是for...of，既能遍歷key，又能遍歷value。

for (let key of $map.keys()) {
  console.log(key);
}

for (let value of $map.values()) {
  console.log(value);
}

for (let [key, value] of $map) {
  console.log(key, value);
}
複製代碼

  擴展運算符[...]能夠很方便將map轉換爲數組，結合數組的map方法和filter方法，能夠實現Map自己的遍歷和過濾。（Map自己沒有map和filter方法）。

[...$map.keys()]

[...$map.values()]

[...$map]
複製代碼