一. Set
ES6 提供了新的數據結構 Set。它類似于數組,但是成員的值都是唯一的,沒有重復的值。
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 結構加入成員,結果表明 Set 結構不會添加重復的值。
Set 函數可以接受一個數組,作為參數,用來初始化。
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數組去重:
[...new Set(array)]
向Set加入值的時候,不會發生類型轉換,所以5和"5"是兩個不同的值。類似于精確相等運算符(===)
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.prototype.constructor:構造函數,默認就是Set函數。
Set.prototype.size:返回Set實例的成員總數。
Set 實例方法:
add(value):添加某個值,返回Set結構本身。
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結構轉換為數組
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
Tips: 這里出現數組去重的另一種方法
function unique(array){
return Array.from(new Set(arrat));
}
unique([1, 1, 2, 3]); // [1, 2, 3]
Set 結構的實例有四個遍歷方法,可以用于遍歷成員。
keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器
forEach():使用回調函數遍歷每個成員
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循環遍歷 Set。
let set = new Set(['red', 'green', 'blue']);
for(let x of set){
console.log(x);
}
//red
//green
//blue
Set結構的實例的forEach方法,用于對每個成員執行某種操作,沒有返回值。
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console(value*2))
//2
//4
//6
擴展運算符(...)內部使用for...of循環, 所以也可以用于Set結構
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
//['red', 'green', 'blue']
數組的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}
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 differnce = new Set([...a].filter(x => !b.has(x)));
//Set {1}
二. Map
Map類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當作鍵。
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 結構的set方法,將對象o當作m的一個鍵,然后又使用get方法讀取這個鍵,接著使用delete方法刪除了這個鍵。
作為構造函數,Map 也可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組。
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連續賦值兩次,后一次的值覆蓋前一次的值。
//如果讀取一個未知的鍵,則返回undefined。
new Map().get('asd');
//undefined
只有對同一個對象的引用,Map 結構才將其視為同一個鍵。
const map = new Map();
map.set(['a'], 555);
map.get(['a']); // undefined
Tips:上面代碼的set和get方法,表面是針對同一個鍵,但實際上這是兩個值,內存地址是不一樣的,因此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 結構中被視為兩個鍵。
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
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, 'asd'); //鍵是undefinde
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, 'lalala'); // 鍵是函數
m.get(hello); // 'lalala'
4.has(key)
has方法返回一個布爾值,表示某個鍵是否在當前 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 結構轉為數組結構,比較快速的方法是使用擴展運算符(...)。
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']]
結合數組的map方法、filter方法,可以實現 Map 的遍歷和過濾(Map 本身沒有map和filter方法)。
const map0 = new Map([
[1, 'a'],
[2, 'b'],
[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'}
Map 還有一個forEach方法,與數組的forEach方法類似,也可以實現遍歷。
map.forEach(function(value, key, map){ console.log(key, value); });
三. 與其他結構的數據互換
1.Map 轉為數組
const map = new Map()
.set(ture, 7)
.set('23', 23);
[...map]
//[[true, 7], ['23', 23]]
2.數組 轉為 Map
const map = new Map([
[1, 'a'],
[2, 'b'],
[3, 'c']
]);
3.Map 轉為對象
如果所有 Map 的鍵都是字符串,它可以轉為對象
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.對象轉為Map
function objToStrMap(obj){
let strMap = new Map();
for(let k of Objcet.keys(obj)){
strMap.set(k , obj[k]);
}
return strMap;
}
5.map 轉為 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 的鍵名有非字符串,轉換為json數組
function mapToArrayJson(map){
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set('2', 2);
mapToArrayJson(myMap);
6.Json轉為Map
//JSON 轉為 Map,正常情況下,所有鍵名都是字符串。
function jsonToStrMap(jsonStr){
retrurn objTostrMap(JSON.parse(jsonstr));
}
jsonToStrMap('{"yes" : true, "no" : false}')
//Map {'yes' => true, 'no' => no}