前言

JavaScript 中的物件（Object），實際上就是鍵值對的集合，但是有一個侷限性，鍵(屬性)只能是字串，不能是數字等其他型別。
字典是一種很常見的資料型別，鍵值對的結構，鍵應該可以是數字，也可以是字串。為了解決這個問題，ES6 提供了Map資料結構。
它類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。

Map 字典物件

Map 構造一個字典物件

let m = new Map();
console.log(m);   // Map(0)

初始化賦值, 可以傳一個數組，陣列的成員也是陣列，對一個值是key,第二個值是value

let m = new Map([["user", "yo yo"], ["age", 22]]);
console.log(m);   // Map(2) {'user' => 'yo yo', 'age' => 22}
 

字典的key也可以是數字

let m = new Map([[1, "yo yo"], [2, "zhang san"]]);
console.log(m);   // Map(2) {1 => 'yo yo', 2 => 'zhang san'}

屬性

Map的屬性只有一個size, 返回鍵值對的總數

let m = new Map([[1, "yo yo"], [2, "zhang san"]]);
console.log(m);   // Map(2) {1 => 'yo yo', 2 => 'zhang san'}
console.log(m.size)  // 2 
 

方法

基本的 Map() 方法

set(key, value) 新增鍵值對

set(key, value) 方法新增鍵值對

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m);  // Map(3) {'user' => 'yoyo', 1 => 'hello', 2 => 'world'}

也可以寫鏈式方法，因為set方法返回Map 物件本身

let m = new Map();
m.set('user', 'yoyo')
 .set(1, 'hello')
 .set(2, 'world');

如果key已經存在，set會給key重新賦值

let m = new Map();
m.set('user', 'yoyo')
m.set(1, 'hello')
m.set(2, 'world');
console.log(m);  // Map(3) {'user' => 'yoyo', 1 => 'hello', 2 => 'world'}

// key 存在，重新set賦值
m.set('user', 'hello')
console.log(m); // Map(3) {'user' => 'hello', 1 => 'hello', 2 => 'world'}

get() 獲取對應值

get(key) 獲取 Map 物件中鍵的值。

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m.get('user'));  // yoyo

has(key) 判斷存在

has(key) 判斷是否存在key對應的鍵，返回一個布林值

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m.has('user')) // true

delete(key) 刪除鍵值對

delete(key) 刪除鍵值對，刪除成功返回true

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
a = m.delete(1) ;  // 刪除1 對應的資料
console.log(a);  // true
console.log(m) ;// Map(2) {'user' => 'yoyo', 2 => 'world'}

刪除的可以不存在，返回false

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
b = m.delete('aaa') ;  // 刪除 不存在的
console.log(b);  // false

clear() 清空

clear() 清空所有的鍵值對，沒返回值

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
m.clear();
console.log(m);  // Map(0) {size: 0}

遍歷方法

Map 遍歷的幾種方法

• keys()　　　　 返回 Map 物件中鍵的迭代器。
• values()　　　 返回 Map 物件中值的迭代器。
• entries()　　　返回 Map 物件中鍵/值對的迭代器。
• forEach()　　 使用回撥函式遍歷每個成員

keys() 返回 Map 中鍵迭代器

返回 MapIterator

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m.keys()); // MapIterator

遍歷取key

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m.keys()); // MapIterator

// for... of 遍歷取key
for(let key of m.keys()){
    console.log(key); 
}

values() 返回 Map 物件中值的迭代器。

遍歷取value

// for... of 遍歷取value
for(let value of m.values()){
    console.log(value);
}

entries() 返回 Map 物件中鍵/值對的迭代器

遍歷取key/value

// for... of 遍歷取key, value
for(let item of m.entries()){
     console.log(item[0], item[1]);
}

解構優化

// 解構優化
for(let [key, value] of m.entries()){
     console.log(key, value);
}

forEach() 遍歷

forEach() 通用的遍歷方法

m.forEach(function (key, value) {
    console.log(key, value)

})

或者用箭頭函式

m.forEach((key, value) => {
    console.log(key, value)

})

Map 字典 和 Array 陣列相互轉換

Map 字典轉 Array 陣列

let m = new Map();
m.set('user', 'yoyo')
m.set(1, 'hello')
m.set(2, 'world');
console.log(m);  // Map(3) {'user' => 'yoyo', 1 => 'hello', 2 => 'world'}
// map 轉陣列
a = Array.from(m);
console.log(a)  // Array

Array 陣列轉 Map 字典

// 陣列轉map
aa = [
    ['user', 'yoyo'],
    [1, 'hello'],
    [2, 'world']
]
let mm = new Map(aa);
console.log(mm)  // Map