一：Set

基本用法

ES6 提供了新的資料結構 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

上面程式碼通過add方法向 Set 結構加入成員，結果表明 Set 結構不會新增重複的值。

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

// 例三
function divs () {
return […document.querySelectorAll(‘div’)];
}
const set = new Set(divs());
set.size // 56

// 類似於
divs().forEach(div => set.add(div));
set.size // 56

上面程式碼中，例一和例二都是Set函式接受陣列作為引數，例三是接受類似陣列的物件作為引數。

上面程式碼中，也展示了一種去除陣列重複成員的方法。
// 去除陣列的重複成員
[…new Set(array)]

向 Set 加入值的時候，不會發生型別轉換，所以5和"5"是兩個不同的值。Set 內部判斷兩個值是否不同，使用的演算法叫做“Same-value equality”，它類似於精確相等運算子（===），主要的區別是NaN等於自身，而精確相等運算子認為NaN不等於自身。
let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}
上面程式碼向 Set 例項添加了兩個NaN，但是隻能加入一個。這表明，在 Set 內部，兩個NaN是相等。
另外，兩個物件總是不相等的。
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2
上面程式碼表示，由於兩個空物件不相等，所以它們被視為兩個值。

Set 例項的屬性和方法

Set 結構的例項有以下屬性。
1：Set.prototype.constructor：建構函式，預設就是Set函式。
2：Set.prototype.size：返回Set例項的成員總數。

Set 例項的方法分為兩大類：操作方法（用於操作資料）和遍歷方法（用於遍歷成員）。

操作方法

1：add(value)：新增某個值，返回 Set 結構本身。

2：delete(value)：刪除某個值，返回一個布林值，表示刪除是否成功。

3：has(value)：返回一個布林值，表示該值是否為Set的成員。

4：clear()：清除所有成員，沒有返回值。

上面這些屬性和方法的例項如下。

例1
s.add(1).add(2).add(2);
// 注意2被加入了兩次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false

例2
s.delete(2);
s.has(2) // false

下面是一個對比，看看在判斷是否包括一個鍵上面，Object結構和Set結構的寫法不同。
// 物件的寫法
const properties = {
‘width’: 1,
‘height’: 1
};
if (properties[someName]) {
// do something
}

// Set的寫法
const properties = new Set();
properties.add(‘width’);
properties.add(‘height’);
if (properties.has(someName)) {
// do something
}

遍歷操作

Set 結構的例項有四個遍歷方法，可以用於遍歷成員。

1：keys()：返回鍵名的遍歷器

2：values()：返回鍵值的遍歷器

3：entries()：返回鍵值對的遍歷器

4：forEach()：使用回撥函式遍歷每個成員

需要特別指出的是，Set的遍歷順序就是插入順序。這個特性有時非常有用，比如使用 Set 儲存一個回撥函式列表，呼叫時就能保證按照新增順序呼叫。

（1）keys()，values()，entries()

keys方法、values方法、entries方法返回的都是遍歷器物件。由於 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），所以keys方法和values方法的行為完全一致。

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”]
上面程式碼中，entries方法返回的遍歷器，同時包括鍵名和鍵值，所以每次輸出一個數組，它的兩個成員完全相等。

Set 結構的例項預設可遍歷，它的預設遍歷器生成函式就是它的values方法。
Set.prototype[Symbol.iterator] === Set.prototype.values
// true
這意味著，可以省略values方法，直接用for…of迴圈遍歷 Set。
let set = new Set([‘red’, ‘green’, ‘blue’]);
for (let x of set) {
console.log(x);
}
// red
// green
// blue

（2）forEach()

Set 結構的例項與陣列一樣，也擁有forEach方法，用於對每個成員執行某種操作，沒有返回值。

set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ’ : ’ + value))
// 1 : 1
// 4 : 4
// 9 : 9
上面程式碼說明，forEach方法的引數就是一個處理函式。該函式的引數與陣列的forEach一致，依次為鍵值、鍵名、集合本身（上例省略了該引數）。這裡需要注意，Set 結構的鍵名就是鍵值（兩者是同一個值），因此第一個引數與第二個引數的值永遠都是一樣的。

另外，forEach方法還可以有第二個引數，表示繫結處理函式內部的this物件。

Array.from方法可以將 Set 結構轉為陣列
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

這就提供了去除陣列重複成員的另一種方法。
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]

遍歷的應用

1：擴充套件運算子（…）內部使用for…of迴圈，所以也可以用於 Set 結構
let set = new Set([‘red’, ‘green’, ‘blue’]);
let arr = […set];
// [‘red’, ‘green’, ‘blue’]

擴充套件運算子和 Set 結構相結合，就可以去除陣列的重複成員。
let arr = [3, 5, 2, 2, 5, 5];
let unique = […new Set(arr)];
// [3, 5, 2]

2：陣列的map和filter方法也可以間接用於 Set 了
let set = new Set([1, 2, 3]);
set = new Set([…set].map(x => x * 2));
// 返回Set結構：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([…set].filter(x => (x % 2) == 0));
// 返回Set結構：{2, 4}

3：使用 Set 可以很容易地實現並集（Union）、交集（Intersect）和差集（Difference）。
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}

4：在遍歷操作中，同步改變原來的 Set 結構
目前沒有直接的方法，但有兩種變通方法。一種是利用原 Set 結構映射出一個新的結構，然後賦值給原來的 Set 結構；另一種是利用Array.from方法。
// 方法一
let set = new Set([1, 2, 3]);
set = new Set([…set].map(val => val * 2));
// set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

上面程式碼提供了兩種方法，直接在遍歷操作中改變原來的 Set 結構。

二：Map

含義和基本用法

JavaScript 的物件（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。

為了解決這個問題，ES6 提供了 Map 資料結構。它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。也就是說，Object 結構提供了“字串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的資料結構，Map 比 Object 更合適。

const m = new Map();
const o = {p: ‘Hello World’};

m.set(o, ‘content’)
m.get(o) // “content”

上面程式碼使用 Map 結構的set方法，將物件o當作m的一個鍵，然後又使用get方法讀取這個鍵

1：作為建構函式，Map 也可以接受一個數組作為引數。該陣列的成員是一個個表示鍵值對的陣列。
const map = new Map([
[‘name’, ‘張三’],
[‘title’, ‘Author’]
]);
map.size // 2
map.has(‘name’) // true
map.get(‘name’) // “張三”

Map建構函式接受陣列作為引數，實際上執行的是下面的演算法。
const items = [
[‘name’, ‘張三’],
[‘title’, ‘Author’]
];

const map = new Map();

items.forEach(
([key, value]) => map.set(key, value)
);

例：
const set = new Set([
[‘foo’, 1],
[‘bar’, 2]
]);
const m1 = new Map(set);
m1.get(‘foo’) // 1

const m2 = new Map([[‘baz’, 3]]);
const m3 = new Map(m2);
m3.get(‘baz’) // 3

上面程式碼中，我們分別使用 Set 物件和 Map 物件，當作Map建構函式的引數，結果都生成了新的 Map 物件。

2：如果對同一個鍵多次賦值，後面的值將覆蓋前面的值。

3：如果讀取一個未知的鍵，則返回undefined。

注意，只有對同一個物件的引用，Map 結構才將其視為同一個鍵。這一點要非常小心。

const map = new Map();
map.set([‘a’], 555);
map.get([‘a’]) // undefined
上面程式碼的set和get方法，表面是針對同一個鍵，但實際上這是兩個值，記憶體地址是不一樣的，因此get方法無法讀取該鍵，返回undefined。

同理，同樣的值的兩個例項，在 Map 結構中被視為兩個鍵。
const map = new Map();
const k1 = [‘a’];
const k2 = [‘a’];
map
.set(k1, 111)
.set(k2, 222);

map.get(k1) // 111
map.get(k2) // 222
上面程式碼中，變數k1和k2的值是一樣的，但是它們在 Map 結構中被視為兩個鍵。

由上可知，Map 的鍵實際上是跟記憶體地址繫結的，只要記憶體地址不一樣，就視為兩個鍵。這就解決了同名屬性碰撞（clash）的問題，我們擴充套件別人的庫的時候，如果使用物件作為鍵名，就不用擔心自己的屬性與原作者的屬性同名。

如果 Map 的鍵是一個簡單型別的值（數字、字串、布林值），則只要兩個值嚴格相等，Map 將其視為一個鍵，比如0和-0就是一個鍵，布林值true和字串true則是兩個不同的鍵。另外，undefined和null也是兩個不同的鍵。雖然NaN不嚴格相等於自身，但 Map 將其視為同一個鍵。

let map = new Map();
map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set(‘true’, 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

例項的屬性和操作方法

Map 結構的例項有以下屬性和操作方法

（1）size 屬性：size屬性返回 Map 結構的成員總數。
const map = new Map();
map.set(‘foo’, true);
map.set(‘bar’, false);
map.size // 2

（2）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’);

（3）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!

（4）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

（5）delete(key)：delete方法刪除某個鍵，返回true。如果刪除失敗，返回false。
const m = new Map();
m.set(undefined, ‘nah’);
m.has(undefined) // true

m.delete(undefined)
m.has(undefined) // false

（6）clear()：clear方法清除所有成員，沒有返回值。
let map = new Map();
map.set(‘foo’, true);
map.set(‘bar’, false);

map.size // 2
map.clear()
map.size // 0

遍歷方法

Map 結構原生提供三個遍歷器生成函式和一個遍歷方法。

1：keys()：返回鍵名的遍歷器。

2：values()：返回鍵值的遍歷器。

3：entries()：返回所有成員的遍歷器。

4：forEach()：遍歷 Map 的所有成員。

需要特別注意的是，Map 的遍歷順序就是插入順序。

例1：
const map = new Map([
[‘F’, ‘no’],
[‘T’, ‘yes’],
]);

for (let key of map.keys()) {
console.log(key);
}
// “F”
// “T”

例2：
for (let value of map.values()) {
console.log(value);
}
// “no”
// “yes”

例3：
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// “F” “no”
// “T” “yes”

// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// “F” “no”
// “T” “yes”

// 等同於使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// “F” “no”
// “T” “yes”

上面程式碼最後的那個例子，表示 Map 結構的預設遍歷器介面（Symbol.iterator屬性），就是entries方法。

map[Symbol.iterator] === map.entries
// true

1：Map 結構轉為陣列結構，比較快速的方法是使用擴充套件運算子（…）。
const map = new Map([
[1, ‘one’],
[2, ‘two’],
[3, ‘three’],
]);

[…map.keys()]
// [1, 2, 3]

[…map.values()]
// [‘one’, ‘two’, ‘three’]

[…map.entries()]
// [[1,‘one’], [2, ‘two’], [3, ‘three’]]

[…map]
// [[1,‘one’], [2, ‘two’], [3, ‘three’]]

2：結合陣列的map方法、filter方法，可以實現 Map 的遍歷和過濾（Map 本身沒有map和filter方法）。
const map0 = new Map()
.set(1, ‘a’)
.set(2, ‘b’)
.set(3, ‘c’);

const map1 = new Map(
[…map0].filter(([k, v]) => k < 3)
);
// 產生 Map 結構 {1 => ‘a’, 2 => ‘b’}

const map2 = new Map(
[…map0].map(([k, v]) => [k * 2, ‘_’ + v])
);
// 產生 Map 結構 {2 => ‘_a’, 4 => ‘_b’, 6 => ‘_c’}

3：Map 還有一個forEach方法，與陣列的forEach方法類似，也可以實現遍歷。
map.forEach(function(value, key, map) {
console.log(“Key: %s, Value: %s”, key, value);
});

forEach方法還可以接受第二個引數，用來繫結this。
const reporter = {
report: function(key, value) {
console.log(“Key: %s, Value: %s”, key, value);
}
};

map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter);

上面程式碼中，forEach方法的回撥函式的this，就指向reporter。

與其他資料結構的互相轉換

（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’]}

文章來源：https://blog.csdn.net/qq_24892029/article/details/79169247