Hi、瞭解下Set和Map

Set 和 Map

Set 和 Map 都是 ES6 中新增的數據結構，是對當前 JS 數組和對象這兩種重要數據結構的擴展。因爲是新增的數據結構

• Set 相似於數組，但數組能夠容許元素重複，Set 不容許元素重複
• Map 相似於對象，但普通對象的 key 必須是字符串或者數字，而 Map 的 key 能夠是任何數據類型...

Set

Set 實例不容許元素有重複，能夠經過如下示例證實。能夠經過一個數組初始化一個 Set 實例，或者經過add添加元素，元素不能重複，重複的會被忽略。

// 例1
const set = new Set([1, 2, 3, 4, 4]);
console.log(set) // Set(4) {1, 2, 3, 4}

// 例2
const set = new Set();
[2, 3, 5, 4, 5, 8, 8].forEach(item => set.add(item));
for (let item of set) {
  console.log(item);
}
// 2 3 5 4 8

Set 實例的屬性和方法有

• size：獲取元素數量。
• add(value)：添加元素，返回 Set 實例自己。
• delete(value)：刪除元素，返回一個布爾值，表示刪除是否成功。
• has(value)：返回一個布爾值，表示該值是不是 Set 實例的元素。
• clear()：清除全部元素，沒有返回值。

const s = new Set();
s.add(1).add(2).add(2); // 添加元素

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

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

s.clear();
console.log(s);  // Set(0) {}

Set 實例的遍歷，可以使用以下方法

• keys()：返回鍵名的遍歷器。
• values()：返回鍵值的遍歷器。不過因爲 Set 結構沒有鍵名，只有鍵值（或者說鍵名和鍵值是同一個值），因此keys()和values()返回結果一致。
• entries()：返回鍵值對的遍歷器。
• forEach()：使用回調函數遍歷每一個成員。

let set = new Set(['aaa', 'bbb', 'ccc']);

for (let item of set.keys()) {
  console.log(item);
}
// aaa
// bbb
// ccc

for (let item of set.values()) {
  console.log(item);
}
// aaa
// bbb
// ccc

for (let item of set.entries()) {
  console.log(item);
}
// ["aaa", "aaa"]
// ["bbb", "bbb"]
// ["ccc", "ccc"]

set.forEach((value, key) => console.log(key + ' : ' + value))
// aaa : aaa
// bbb : bbb
// ccc : ccc...

Map

Map 的用法和普通對象基本一致，先看一下它能用非字符串或者數字做爲 key 的特性。

const map = new Map();
const obj = {p: 'Hello World'};

map.set(obj, 'OK')
map.get(obj) // "OK"

map.has(obj) // true
map.delete(obj) // true
map.has(obj) // false

須要使用new Map()初始化一個實例，下面代碼中set get has delete顧名便可思義（下文也會演示）。其中，map.set(obj, 'OK')就是用對象做爲的 key （不光能夠是對象，任何數據類型均可以），而且後面經過map.get(obj)正確獲取了。

Map 實例的屬性和方法以下：

size：獲取成員的數量
set：設置成員 key 和 value
get：獲取成員屬性值
has：判斷成員是否存在
delete：刪除成員
clear：清空全部

const map = new Map();
map.set('aaa', 100);
map.set('bbb', 200);

map.size // 2

map.get('aaa') // 100

map.has('aaa') // true

map.delete('aaa')
map.has('aaa') // false

map.clear()

Map 實例的遍歷方法有：

• keys()：返回鍵名的遍歷器。
• values()：返回鍵值的遍歷器。
• entries()：返回全部成員的遍歷器。
• forEach()：遍歷 Map 的全部成員。
• const map = new Map();
• map.set('aaa', 100);
• map.set('bbb', 200);

for (let key of map.keys()) {
  console.log(key);
}
// "aaa"
// "bbb"

for (let value of map.values()) {
  console.log(value);
}
// 100
// 200

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// aaa 100
// bbb 200

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// aaa 100
// bbb 200