1. set
ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set拟杉。它類似于數(shù)組笑旺,但是成員的值都是唯一的,沒有重復(fù)的值好唯。
Set 本身是一個(gè)構(gòu)造函數(shù)竭沫,用來生成 Set 數(shù)據(jù)結(jié)構(gòu) 。
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 結(jié)構(gòu)加入成員骑篙,結(jié)果表明Set 結(jié)構(gòu)不會(huì)添加重復(fù)的值蜕提。
// 例一
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<strong>
</strong>
上面代碼中,也展示了一種去除數(shù)組重復(fù)成員的方法s
// 去除數(shù)組的重復(fù)成員
[...new Set(array)]
還有一種函數(shù)法數(shù)組去重
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
Set 實(shí)例的方法分為兩大類:操作方法(用于操作數(shù)據(jù))和遍歷方法(用于遍歷成員)靶端。下面先介紹四個(gè)操作方法谎势。
- add(value):添加某個(gè)值凛膏,返回Set結(jié)構(gòu)本身。
- delete(value):刪除某個(gè)值脏榆,返回一個(gè)布爾值猖毫,表示刪除是否成功。
- has(value):返回一個(gè)布爾值须喂,表示該值是否為Set的成員吁断。
- clear():清除所有成員,沒有返回值坞生。
s.add(1).add(2).add(2);
// 注意2被加入了兩次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
Set 結(jié)構(gòu)的實(shí)例有四個(gè)遍歷方法仔役,可以用于遍歷成員。
- keys():返回鍵名的遍歷器
- values():返回鍵值的遍歷器
- entries():返回鍵值對(duì)的遍歷器
- forEach():使用回調(diào)函數(shù)遍歷每個(gè)成員
(1)keys()是己,values()骂因,entries()
由于 Set 結(jié)構(gòu)沒有鍵名,只有鍵值(或者說鍵名和鍵值是同一個(gè)值)赃泡,所以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"]
(2)forEach()
Set結(jié)構(gòu)的實(shí)例的forEach方法,用于對(duì)每個(gè)成員執(zhí)行某種操作升熊,沒有返回值俄烁。
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6
(3)遍歷的應(yīng)用
擴(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']
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
而且页屠,數(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 可以很容易地實(shí)現(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 difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
如果想在遍歷操作中,同步改變?cè)瓉淼?Set 結(jié)構(gòu)况鸣,目前沒有直接的方法牢贸,但有兩種變通方法。一種是利用原 Set 結(jié)構(gòu)映射出一個(gè)新的結(jié)構(gòu)镐捧,然后賦值給原來的 Set 結(jié)構(gòu)潜索;另一種是利用Array.from方法。
2. Map
Set類似于數(shù)組懂酱,而Map就類似于鍵值對(duì)(Key, Value)竹习;
ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象列牺,也是鍵值對(duì)的集合整陌,但是“鍵”的范圍不限于字符串,各種類型的值(包括對(duì)象)都可以當(dāng)作鍵。
const map = new Map([
['name', '張三'],
['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"
上面代碼在新建 Map 實(shí)例時(shí)泌辫,就指定了兩個(gè)鍵name和title随夸。
Map構(gòu)造函數(shù)接受數(shù)組作為參數(shù),實(shí)際上執(zhí)行的是下面的算法甥郑。
const items = [
['name', '張三'],
['title', 'Author']
];
const map = new Map();
items.forEach(
([key, value]) => map.set(key, value)
);
如果 Map 的鍵是一個(gè)簡(jiǎn)單類型的值(數(shù)字逃魄、字符串、布爾值)澜搅,則只要兩個(gè)值嚴(yán)格相等伍俘,Map 將其視為一個(gè)鍵,包括0和-0勉躺,布爾值true和字符串true則是兩個(gè)不同的鍵癌瘾。另外,undefined和null也是兩個(gè)不同的鍵饵溅。雖然NaN不嚴(yán)格相等于自身妨退,但 Map 將其視為同一個(gè)鍵。
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有size()屬性蜕企,查看Map對(duì)象大小咬荷,set(key , value) , get(Key), delete(key) , has(key) ,clear()方法轻掩。
遍歷方法
Map 結(jié)構(gòu)原生提供三個(gè)遍歷器生成函數(shù)和一個(gè)遍歷方法幸乒。
- 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 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 結(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.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
結(jié)合數(shù)組的map方法臀蛛、filter方法,可以實(shí)現(xiàn) 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)
);
// 產(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'}
結(jié)合數(shù)組的map方法掺栅、filter方法,可以實(shí)現(xiàn) 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)
);
// 產(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可以跟數(shù)組,對(duì)象桃笙,JSON相互轉(zhuǎn)換氏堤,這里記錄一下與JSON的轉(zhuǎn)換
--Map 轉(zhuǎn)為 JSON
Map 轉(zhuǎn)為 JSON 要區(qū)分兩種情況。一種情況是,Map 的鍵名都是字符串鼠锈,這時(shí)可以選擇轉(zhuǎn)為對(duì)象 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 的鍵名有非字符串购笆,這時(shí)可以選擇轉(zhuǎn)為數(shù)組 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 轉(zhuǎn)為 Map
JSON 轉(zhuǎn)為 Map,正常情況下同欠,所有鍵名都是字符串样傍。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
但是,有一種特殊情況铺遂,整個(gè) JSON 就是一個(gè)數(shù)組衫哥,且每個(gè)數(shù)組成員本身,又是一個(gè)有兩個(gè)成員的數(shù)組襟锐。這時(shí)撤逢,它可以一一對(duì)應(yīng)地轉(zhuǎn)為Map。這往往是數(shù)組轉(zhuǎn)為 JSON 的逆操作粮坞。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
WeakSet和WeakMap適用于防止內(nèi)存泄漏蚊荣,這里不做說明。