一. Set
ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。
const s = new Set();
[2, 3, 4, 5, 4, 2].forEach( x => s.add(x));
for(let i of s){
console.log(i);
}
// 2 3 4 5
Tips:上面代碼通過add方法向 Set 結(jié)構(gòu)加入成員，結(jié)果表明 Set 結(jié)構(gòu)不會添加重復(fù)的值。
Set 函數(shù)可以接受一個數(shù)組,作為參數(shù)，用來初始化。
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 div(){
return [...document.querySelectorAll('div')];
}
const set = new Set(divs());
set.size // 56
es6數(shù)組去重:
[...new Set(array)]
向Set加入值的時候，不會發(fā)生類型轉(zhuǎn)換，所以5和"5"是兩個不同的值。類似于精確相等運(yùn)算符（===）
let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set{NaN}
//上面代碼向 Set 實例添加了兩個NaN，但是只能加入一個。這表明，在 Set 內(nèi)部，兩個NaN是相等。
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2
//上面代碼表示，由于兩個空對象不相等，所以它們被視為兩個值。
Set.prototype.constructor：構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。
Set.prototype.size：返回Set實例的成員總數(shù)。
Set 實例方法:
add(value)：添加某個值，返回Set結(jié)構(gòu)本身。
delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
has(value)：返回一個布爾值，表示該值是否為Set的成員。
clear()：清除所有成員，沒有返回值。
let s = new Set();
s.add(1).add(2).add(2);
//注意被加入兩次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // fasle
s.delete(2);
s.has(2) //false
Array.from 方法可以將Set結(jié)構(gòu)轉(zhuǎn)換為數(shù)組
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
Tips: 這里出現(xiàn)數(shù)組去重的另一種方法
function unique(array){
return Array.from(new Set(arrat));
}
unique([1, 1, 2, 3]); // [1, 2, 3]
Set 結(jié)構(gòu)的實例有四個遍歷方法，可以用于遍歷成員。
keys()：返回鍵名的遍歷器
values()：返回鍵值的遍歷器
entries()：返回鍵值對的遍歷器
forEach()：使用回調(diào)函數(shù)遍歷每個成員
Tips: Set的遍歷順序就是插入順序
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"]
可以省略values方法，直接用for...of循環(huán)遍歷 Set。
let set = new Set(['red', 'green', 'blue']);
for(let x of set){
console.log(x);
}
//red
//green
//blue
Set結(jié)構(gòu)的實例的forEach方法，用于對每個成員執(zhí)行某種操作，沒有返回值。
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console(value*2))
//2
//4
//6
擴(kuò)展運(yùn)算符(...)內(nèi)部使用for...of循環(huán), 所以也可以用于Set結(jié)構(gòu)
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
//['red', 'green', 'blue']
數(shù)組的map和filter方法也可以用于Set
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x = x*2));
//返回Set結(jié)構(gòu): {2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2)== 0));
//返回Set結(jié)構(gòu){2, 4}
Set可以很容易地實現(xiàn)并集（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 differnce = new Set([...a].filter(x => !b.has(x)));
//Set {1}
二. Map
Map類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。
const m = new Map();
const o = { p : 'hello world'};
m.set(o, 'content');
m.get(o, 'content'); // 'content'
m.has(o); //true
m.delete(o); //true
m.has(o); //false
Tips:上面代碼使用 Map 結(jié)構(gòu)的set方法，將對象o當(dāng)作m的一個鍵，然后又使用get方法讀取這個鍵，接著使用delete方法刪除了這個鍵。
作為構(gòu)造函數(shù)，Map 也可以接受一個數(shù)組作為參數(shù)。該數(shù)組的成員是一個個表示鍵值對的數(shù)組。
const map = new Map([
['name', 'mark'], ['title', 'Author']
]);
map.size //2
map.has('name'); // true;
map.get('name'); // 'mark'
map.has('title'); // true
map.get('title'); // 'Author'
如果對同一個鍵多次賦值，后面的值將覆蓋前面的值。
const map = new Map();
map.set(1, 'aaa')
.set(1, 'bbb');
map.get(1); // "bbb"
Tips:上面代碼對鍵1連續(xù)賦值兩次，后一次的值覆蓋前一次的值。
//如果讀取一個未知的鍵，則返回undefined。
new Map().get('asd');
//undefined
只有對同一個對象的引用，Map 結(jié)構(gòu)才將其視為同一個鍵。
const map = new Map();
map.set(['a'], 555);
map.get(['a']); // undefined
Tips:上面代碼的set和get方法，表面是針對同一個鍵，但實際上這是兩個值，內(nèi)存地址是不一樣的，因此get方法無法讀取該鍵，返回undefined。
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
Tips:上面代碼中，變量k1和k2的值是一樣的，但是它們在 Map 結(jié)構(gòu)中被視為兩個鍵。
Map 的鍵實際上是跟內(nèi)存地址綁定的，只要內(nèi)存地址不一樣，就視為兩個鍵。
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
1.size屬性
size屬性返回 Map 結(jié)構(gòu)的成員總數(shù)。
const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size//2
2.set(key, value)
set方法設(shè)置鍵名key對應(yīng)的鍵值為value，然后返回整個 Map 結(jié)構(gòu)。如果key已經(jīng)有值，則鍵值會被更新，否則就新生成該鍵。
const m = new Map();
m.set('edition'. 6); //鍵是字符串
m.set(262, 'standard'); //鍵是數(shù)值
m.set(undefined, 'asd'); //鍵是undefinde
set方法返回的是當(dāng)前的Map對象，因此可以采用鏈?zhǔn)綄懛ā?/p>
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
3.get(key)
get方法讀取key對應(yīng)的鍵值，如果找不到key，返回undefined。
const m = new Map();
const hello = function(){
console.log('hello');
}
m.set(hello, 'lalala'); // 鍵是函數(shù)
m.get(hello); // 'lalala'
4.has(key)
has方法返回一個布爾值，表示某個鍵是否在當(dāng)前 Map 對象之中。
const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefind, 'asd');
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(undfined, 'asd');
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
7.遍歷方法
keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回所有成員的遍歷器。
forEach()：遍歷 Map 的所有成員。
Map 的遍歷順序就是插入順序。
const map = new Map([
['F', 'no'], ['T', 'yes']
]);
for(let key of map.keys()){
console.log(key);
}
//'F'
//'T'
for(let value of map.values()){
console.log(value);
}
//'no'
//'yes'
for(let [key, value] of map.entries){
console.log(key, value);
}
// "F" "no"
// "T" "yes"
//等同于
for(let [key, value] of map){
console.log(key, value);
}
// "F" "no"
// "T" "yes"
Map 結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)，比較快速的方法是使用擴(kuò)展運(yùn)算符（...）。
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three']
]);
[...map.keys()]
//[1, 2, 3]
[...map.value()]
//['one' , 'two', 'three']
[...map.entries()]
//[['1', 'one'], ['2', 'two'], ['3', 'three']]
[...map]
//[['1', 'one'], ['2', 'two'], ['3', 'three']]
結(jié)合數(shù)組的map方法、filter方法，可以實現(xiàn) Map 的遍歷和過濾（Map 本身沒有map和filter方法）。
const map0 = new Map([
[1, 'a'],
[2, 'b'],
[3, 'c']
]);
const map1 = new Map([...map0.filter(k, v) => k <3]);
//產(chǎn)生 Map 結(jié)構(gòu) {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map([k, v] => [k *2, '_' + v])
);
//產(chǎn)生Map結(jié)構(gòu){2 => '_a', 4 => '_b', 6 => '_c'}
Map 還有一個forEach方法，與數(shù)組的forEach方法類似，也可以實現(xiàn)遍歷。
map.forEach(function(value, key, map){ console.log(key, value); });
三. 與其他結(jié)構(gòu)的數(shù)據(jù)互換
1.Map 轉(zhuǎn)為數(shù)組
const map = new Map()
.set(ture, 7)
.set('23', 23);
[...map]
//[[true, 7], ['23', 23]]
2.數(shù)組 轉(zhuǎn)為 Map
const map = new Map([
[1, 'a'],
[2, 'b'],
[3, 'c']
]);
3.Map 轉(zhuǎn)為對象
如果所有 Map 的鍵都是字符串，它可以轉(zhuǎn)為對象
function strMapToObj(strMap){
let obj = Object.create(null);
for(let [k, v] of strMap){
obj[k] = v
}
return obj;
}
const map = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(map);
//{yes : true, no : false}
4.對象轉(zhuǎn)為Map
function objToStrMap(obj){
let strMap = new Map();
for(let k of Objcet.keys(obj)){
strMap.set(k , obj[k]);
}
return strMap;
}
5.map 轉(zhuǎn)為 json
//Map 的鍵名都是字符串
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 的鍵名有非字符串,轉(zhuǎn)換為json數(shù)組
function mapToArrayJson(map){
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set('2', 2);
mapToArrayJson(myMap);
6.Json轉(zhuǎn)為Map
//JSON 轉(zhuǎn)為 Map，正常情況下，所有鍵名都是字符串。
function jsonToStrMap(jsonStr){
retrurn objTostrMap(JSON.parse(jsonstr));
}
jsonToStrMap('{"yes" : true, "no" : false}')
//Map {'yes' => true, 'no' => no}
