ES6 提供了新的數據結構 Set以及Map,下面我們來一一講解。
一、Set
特性
似於數組,但它的一大特性就是所有元素都是唯一的,沒有重復。
我們可以利用這一唯一特性進行數組的去重工作。
1.單一數組的去重
let set6 = new Set([1, 2, 2, 3, 4, 3, 5]) console.log('distinct 1:', set6)
結果:
distinct 1: Set { 1, 2, 3, 4, 5 }
2.多數組的合並去重
let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6] let set7 = new Set([...arr1, ...arr2]) console.log('distinct 2:', set7)
結果:
distinct 2: Set { 1, 2, 3, 4, 5, 6 }
操作----------------------------------
1.add
let set1 = new Set() set1.add(1) set1.add(2) set1.add(3) console.log('added:', set1)
結果:
added: Set { 1, 2, 3 }
2.delete
let set1 = new Set() set1.add(1) set1.add(2) set1.add(3) set1.delete(1) console.log('deleted:', set1)
結果:
deleted: Set { 2, 3 }
3.has
let set1 = new Set() set1.add(1) set1.add(2) set1.add(3) set1.delete(1) console.log('has(1):', set1.has(1)) console.log('has(2):', set1.has(2))
結果:
has(1): false has(2): true
4.clear
let set1 = new Set() set1.add(1) set1.add(2) set1.add(3) set1.clear() console.log('cleared:', set1)
結果:
cleared: Set {}
5.size屬性
console.log("容器大小:",set.size); //4
6.Array 轉 Set
let set2 = new Set([4,5,6]) console.log('array to set 1:', set2) let set3 = new Set(new Array(7, 8, 9)) console.log('array to set 2:', set3)
結果:
array to set 2: Set { 4, 5, 6 }
array to set 3: Set { 7, 8, 9 }
7.Set 轉 Array
let set4 = new Set([4, 5, 6]) console.log('set to array 1:', [...set4]) console.log('set to array 2:', Array.from(set4))
結果:
set to array 1: [ 4, 5, 6 ]
set to array 2: [ 4, 5, 6 ]
8.遍歷(keys(),values(),entries())
可以使用Set實例對象的keys(),values(),entries()方法進行遍歷。
由於Set的鍵名和鍵值是同一個值,它的每一個元素的key和value是相同的,所有keys()和values()的返回值是相同的,entries()返回的元素中的key和value是相同的。
let set5 = new Set([4, 5, 'hello']) console.log('iterate useing Set.keys()') for(let item of set5.keys()) { console.log(item) } console.log('iterate useing Set.values()') for(let item of set5.values()) { console.log(item) } console.log('iterate useing Set.entries()') for(let item of set5.entries()) { console.log(item) }
結果:
iterate useing Set.keys() 4 5 hello
iterate useing Set.values() 4 5 hello
iterate useing Set.entries() [ 4, 4 ] [ 5, 5 ] [ 'hello', 'hello' ]
注:在向Set加入值時,Set不會轉換數據類型,內部在判斷元素是否存在時用的類似於精確等於(===)的方法,“2”和2是不同的。
二、Map
Javascript的Object本身就是鍵值對的數據結構,但實際上屬性和值構成的是”字符串-值“對,屬性只能是字符串,如果傳個對象字面量作為屬性名,那么會默認把對象轉換成字符串,結果這個屬性名就變成”[object Object]“。
ES6提供了”值-值“對的數據結構,鍵名不僅可以是字符串,也可以是對象。它是一個更完善的Hash結構。
特性
const map1 = new Map() const objkey = {p1: 'v1'} map1.set(objkey, 'hello') console.log(map1.get(objkey))
結果:
hello
2.Map可以接受數組作為參數,數組成員還是一個數組,其中有兩個元素,一個表示鍵一個表示值。
const map2 = new Map([ ['name', 'Aissen'], ['age', 12] ]) console.log(map2.get('name')) console.log(map2.get('age'))
結果:
Aissen
12
操作-------------------------------
1.size
獲取map的大小。
const map3 = new Map(); map3.set('k1', 1); map3.set('k2', 2); map3.set('k3', 3); console.log('%s', map3.size)
結果:
3
2.set
const map4 = new Map(); map4.set('k1', 6) // 鍵是字符串 map4.set(222, '哈哈哈') // 鍵是數值 map4.set(undefined, 'gagaga') // 鍵是 undefined const fun = function() {console.log('hello');} map4.set(fun, 'fun') // 鍵是 function console.log('map4 size: %s', map4.size) console.log('undefined value: %s', map4.get(undefined)) console.log('fun value: %s', map4.get(fun))
結果:
map4 size: 4
undefined value: gagaga
fun value: fun
也可對set進行鏈式調用。
map4.set('k2', 2).set('k3', 4).set('k4', 5)
console.log('map4 size: %s', map4.size)
結果:
map4 size: 7
3.get
獲取鍵對應的值。
const map5 = new Map(); map5.set('k1', 6) console.log('map5 value: %s', map5.get('k1'))
結果:
map5 value: 6
4.has
判斷指定的鍵是否存在。
const map6 = new Map(); map6.set(undefined, 4) console.log('map6 undefined: %s', map6.has(undefined)) console.log('map6 k1: %s', map6.has('k1'))
結果:
map6 undefined: true map6 k1: false
5.delete
刪除鍵值對。
const map7 = new Map(); map7.set(undefined, 4) map7.delete(undefined) console.log('map7 undefined: %s', map7.has(undefined))
結果:
map7 undefined: false
6.clear
刪除map中的所有鍵值對。
const map8 = new Map(); map8.set('k1', 1); map8.set('k2', 2); map8.set('k3', 3); console.log('map8, pre-clear size: %s', map8.size) map8.clear() console.log('map8, post-clear size: %s', map8.size)
結果:
map8, pre-clear size: 3
map8, post-clear size: 0
遍歷(keys(),values(),entries(),forEach())
提供三個新的方法 —— entries(),keys()和values() —— 用於遍歷數組。它們都返回一個遍歷器對象,可以用for...of循環進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。
1.keys()
遍歷map的所有key。
const map9 = new Map(); map9.set('k1', 1); map9.set('k2', 2); map9.set('k3', 3); for (let key of map9.keys()) { console.log(key); }
結果:
k1
k2
k3
2.values()
遍歷map所有的值。
for (let value of map9.values()) { console.log(value); }
結果:
1 2 3
3.entries()
遍歷map的所有鍵值對。
方法1:
for (let item of map9.entries()) { console.log(item[0], item[1]); }
結果:
k1 1
k2 2 k3 3
方法2:
for (let [key, value] of map9.entries()) { console.log(key, value); }
結果不變。
4.forEach()
遍歷map的所有鍵值對。
map9.forEach(function(value, key, map) { console.log("Key: %s, Value: %s", key, value); });
結果:
Key: k1, Value: 1
Key: k2, Value: 2 Key: k3, Value: 3
forEach有第二個參數,可以用來綁定this。
這樣有個好處,map的存儲的數據和業務處理對象可以分離,業務處理對象可以盡可能的按職責分割的明確符合SRP原則。
const output = { log: function(key, value) { console.log("Key: %s, Value: %s", key, value); } }; map9.forEach(function(value, key, map) { this.log(key, value); }, output);
和其它結構的互轉----------------------
1.Map 轉 Array
使用擴展運算符三個點(...)可將map內的元素都展開的數組。
const map10 = new Map(); map10.set('k1', 1); map10.set('k2', 2); map10.set('k3', 3); console.log([...map10]); //Array.from(map10)
結果:
[ [ 'k1', 1 ], [ 'k2', 2 ], [ 'k3', 3 ] ]
2.Array 轉 Map
使用數組構造Map。
const map11 = new Map([ ['name', 'Aissen'], ['age', 12] ]) console.log(map11)
結果:
Map { 'name' => 'Aissen', 'age' => 12 }
3.Map 轉 Object
寫一個轉換函數,遍歷map的所有元素,將元素的鍵和值作為對象屬性名和值寫入Object中。
function mapToObj(map) { let obj = Object.create(null); for (let [k,v] of map) { obj[k] = v; } return obj; } const map12 = new Map() .set('k1', 1) .set({pa:1}, 2); console.log(mapToObj(map12))
結果:
{ k1: 1, '[object Object]': 2 }
4.Object 轉 Map
同理,再寫一個轉換函數便利Object,將屬性名和值作為鍵值對寫入Map。
function objToMap(obj) { let map = new Map(); for (let k of Object.keys(obj)) { map.set(k, obj[k]); } return map; } console.log(objToMap({yes: true, no: false}))
結果:
Map { 'yes' => true, 'no' => false }
5.Set 轉 Map
const set = new Set([ ['foo', 1], ['bar', 2] ]); const map13 = new Map(set) console.log(map13)
結果:
Map { 'foo' => 1, 'bar' => 2 }
6.Map 轉 Set
function mapToSet(map) { let set = new Set() for (let [k,v] of map) { set.add([k, v]) } return set; } const map14 = new Map() .set('k1', 1) .set({pa:1}, 2); console.log(mapToSet(map14))
結果:
Set { [ 'k1', 1 ], [ { pa: 1 }, 2 ] }
原文來源:https://www.cnblogs.com/kongxianghai/p/7309735.html
entries(),keys()和values()