ES6，新增數據結構Map的用法

Javascript的Object自己就是鍵值對的數據結構，但實際上屬性和值構成的是」字符串-值「對，屬性只能是字符串，若是傳個對象字面量做爲屬性名，那麼會默認把對象轉換成字符串，結果這個屬性名就變成」[object Object]「。

ES6提供了」值-值「對的數據結構，鍵名不只能夠是字符串，也能夠是對象。它是一個更完善的Hash結構。

 

特性

1.鍵值對，鍵能夠是對象。

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

設置鍵值對，鍵能夠是各類類型，包括undefined，function。

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

 

遍歷

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 To Array

使用擴展運算符三個點（...）可將map內的元素都展開的數組。

const map10 = new Map();
map10.set('k1', 1);
map10.set('k2', 2);
map10.set('k3', 3);
console.log([...map10]);

結果：

[ [ 'k1', 1 ], [ 'k2', 2 ], [ 'k3', 3 ] ]

 

2.Array To Map

使用數組構造Map。

const map11 = new Map([
  ['name', 'Aissen'],
  ['age', 12]
])
console.log(map11)

結果：

Map { 'name' => 'Aissen', 'age' => 12 }

 

3.Map To 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 To 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 To Map

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const map13 = new Map(set)
console.log(map13)

結果：

Map { 'foo' => 1, 'bar' => 2 }

 

6.Map To 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 ] }

 

End