ES5-ES6-ES7_集合Set和Map

集合的概念

集合是一組無序且惟一（元素不能重複）的項組成的。這個數據結構使用了與有限集合相同的數學概念，應用在計算機的數據結構中 特色：key和value相同，沒有重複的value

 

 

Set集合

ES6提供了數據結構set，它相似於數組，可是成員的值都是惟一的，沒有重複的值 。Set 自己是一個構造函數，用來生成 Set 數據結構

Set數據結構的建立——Set方法裏能夠指定參數，也能夠不指定參數（參數是一個數組）

const s1 = new Set();
const s2 = new Set([1,2,3,4]);

console.log(s1) // Set {}
console.log(s2) // Set { 1, 2, 3, 4 }

Set類的屬性——獲取Set類中有幾個數據

const s1 = new Set();
const s2 = new Set([1,2,3,4]);

console.log(s1.size) // 0
console.log(s2.size) // 4

Set類的方法—Set.add(value)——Set.add(value) 添加一個數據，返回Set結構自己

成員的值都是惟一的，沒有重複的值，因此在後面添加相同的值到set結構中是無效的

s1.add('a').add('b');
console.log(s1)   //Set { 'a', 'b' }

s2.add('c')
console.log(s2);   //Set { 1, 2, 3, 4, 'c' }

s2.add(1);
console.log(s2);  //已經有相同的值了，因此添加無效仍是原來的 Set { 1, 2, 3, 4, 'c' }

 

Set類的方法—Set.delete(value) set.delete(value) 刪除指定數據，返回一個布爾值，表示刪除是否成功

const s2 = new Set([1,2,3,4]);

var ba1 = s2.delete(1)
var ba2 = s2.delete('c')

console.log(ba1); //true
console.log(ba2); //false
console.log(s2); //Set { 2, 3, 4 }

Set類的方法—Set.has(value)——判斷該值是否爲set的成員，返回一個布爾值

const s = new Set([1,2,3,4]);

const bs1 = s.has(1);
const bs2 = s.has('a');
console.log(bs1,bs2);   //true false

Set類的方法—Set.clear()——清除全部的數據，沒有返回值

const s = new Set([1,2,3,4]);

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

Set的遍歷器——keys() 返回鍵名的遍歷器，values() 返回鍵值的遍歷器，entries() 返回鍵值對的遍歷器，forEach() 使用回調函數遍歷每一個成員

const s = new Set([1,2,3,4]);

console.log(s.keys());  // SetIterator { 1, 2, 3, 4 }
console.log(s.values());   //SetIterator { 1, 2, 3, 4 }
console.log(s.entries());   //SetIterator { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] }


//該方法能夠接收三個參數，分別是：鍵值，健名，set自己
s.forEach(function(value,key,set){
    console.log(value+'lina');
    console.log(set)
})

 利用Set爲數組去重——直接將要給數組放入到，set的的構造方法中便可

const arr = [1,2,3,45,2,3,4,13,5,7,1,3,2]

const s = new Set(arr);

console.log(s);  // Set { 1, 2, 3, 45, 4, 13, 5, 7 }
console.log(arr);   //[ 1, 2, 3, 45, 2, 3, 4, 13, 5, 7, 1, 3, 2 ]

console.log([...s]);//將set轉成數組，結果是[ 1, 2, 3, 45, 4, 13, 5, 7 ]

 

 

 

Map數據結構

Map數據結構概述 字典：是用來存儲不重複key的Hash結構，不一樣於集合（Set）的是，字典使用的是[鍵,值]的形式來存儲數據的

JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），可是傳統上只能用字符串看成鍵。這給它的使用帶來了很大的限制。

爲了解決這個問題，ES6 提供了 Map 數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。也就是說，Object 結構提供了「字符串—值」的對應，Map結構提供了「值—值」的對應，是一種更完善的 Hash 結構實現。若是你須要「鍵值對」的數據結構，Map 比 Object 更合適。

建立Map和Map類的屬性——獲取Map類中有幾個數據

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log(m);  //Map { 'a' => 1, 'b' => 2 }
console.log(m.size);  //2

 Map類的方法—set(key,value) 設置鍵名key對應的鍵值爲value，而後返回整個Map結構，若是key已經有值，則鍵值會被更新，不然就生成該鍵

Map類的方法—get(key)——get方法讀取key對應的鍵值，若是找不到key，返回undefined

const  m = new Map([
    ['a',1],
    ['b',2]
]);

m.set('miaov','ketang').set('xing','huang');//由於返回的是Map結構自己，因此可使用調用鏈的方式
console.log(m);//Map { 'a' => 1, 'b' => 2, 'miaov' => 'ketang', 'xing' => 'huang' }


m.set('b',5);//有相同的key，值會被覆蓋
console.log(m); //Map { 'a' => 1, 'b' => 5, 'miaov' => 'ketang', 'xing' => 'huang' }

console.log(m.get('b'));  //5
console.log(m.get('c'));  //undefined

Map類的方法—delete(key) 刪除某個鍵，刪除成功放回true，若是刪除失敗，返回false

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log(m.delete('b'));//true
console.log(m.delete('c'));//false
console.log(m);//Map { 'a' => 1 }

Map類的方法—has(key) 方法返回一個布爾值，表示某個鍵是否在當前Map對象之中

Map類的方法—clear() 清楚Map結構中的全部數據，沒有返回值

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log(m.has('b'));//true
console.log(m.has('c'));//false

m.clear();
console.log(m);//Map {}

Map的遍歷器 keys() 返回鍵名的遍歷器；values() 返回鍵值的遍歷器；entries() 返回鍵值對的遍歷器；forEach() 使用回調函數遍歷每一個成員

const  m = new Map([
    ['a',1],
    ['b',2],
    ['c',3]
]);

console.log(m.keys());//MapIterator { 'a', 'b', 'c' }
console.log(m.values()); //MapIterator { 1, 2, 3 }
console.log(m.entries());  //MapIterator { [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] }

//該方法能夠接收三個參數：值，鍵，Map自己
m.forEach(function (value, key, Map) {
    console.log(value);
    console.log(key);
})

Map在使用過程當中的一些注意事項一兩個NaN自己是不相等的，但在Map結構中，NaN做爲鍵的話，視爲相等的（同一個鍵）

const  map = new Map();
map.set(NaN,1);
map.set(NaN,2);

console.log(map); //Map { NaN => 2 }

Map在使用過程當中的一些注意事項二 若是Map結構中的key是一個對象的狀況下，每一個對象都是不一樣的鍵，即便是兩個空的對象，由於兩個對象的地址值不一樣，之後引用別人的插件，使用對象做爲鍵，就能避免同名碰撞的狀況

const map = new Map();

map.set({},'x').set({},'y');

console.log(map); //Map { {} => 'x', {} => 'y' }

Map 結構轉爲數組結構——比較快速的方法是使用擴展運算符（...）。

const  m = new Map([
    ['a',1],
    ['b',2]
]);

console.log([...m.keys()]);  //[ 'a', 'b' ]
console.log([...m.values()]);  //[ 1, 2 ]
console.log([...m.entries()]);   //[ [ 'a', 1 ], [ 'b', 2 ] ]
console.log([...m]);   //[ [ 'a', 1 ], [ 'b', 2 ] ]

數組結構轉爲Map結構——將數組傳入 Map 構造函數，就能夠轉爲 Map

const arr = [[1,'one'],[2,'two'],[3,'three']];

const map = new Map(arr);

console.log(map);//Map { 1 => 'one', 2 => 'two', 3 => 'three' }

Map結構轉爲對象——若是全部 Map 的鍵都是字符串，它能夠轉爲對象

const myMap = new Map();

myMap.set('yes', true)
myMap .set('no', false);
console.log(myMap);   //Map { 'yes' => true, 'no' => false }

const obj = strMapToObj(myMap);
console.log(obj); //{ yes: true, no: false }

function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
        obj[k] = v;
    }
    return obj;
}

對象轉爲Map結構

function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}

const map = objToStrMap({yes: true, no: false});
console.log(map);  //Map { 'yes' => true, 'no' => false }

 

Map結構轉爲JSON對象 Map 轉爲 JSON 要區分兩種狀況。一種狀況是，Map 的鍵名都是字符串，這時能夠選擇轉爲對象 JSON。 須要先將其轉成對象

function strMapToJson(strMap) {
    return JSON.stringify(strMapToObj(strMap));
}


function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
        obj[k] = v;
    }
    return obj;
}

let myMap = new Map().set('yes', true).set('no', false);
console.log(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']);
console.log(mapToArrayJson(myMap));  //[[true,7],[{"foo":3},["abc"]]]

JSON轉爲Map結構——JSON 轉爲 Map，正常狀況下，全部鍵名都是字符串

function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
}

function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}

console.log(jsonToStrMap('{"yes": true, "no": false}'));  //Map { 'yes' => true, 'no' => false }

 

有一種特殊狀況，整個 JSON 就是一個數組，且每一個數組成員自己，又是一個有兩個成員的數組。這時，它能夠一一對應地轉爲Map。這每每是數組轉爲 JSON 的逆操做。

function jsonToMap(jsonStr) {
    return new Map(JSON.parse(jsonStr));
}

console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]')); //Map { true => 7, { foo: 3 } => [ 'abc' ] }