map詳解

Object的key會被強制轉化為字符串

它類似於對象，也是鍵值對的集合，但是“鍵”的范圍不限於字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構，Map 比 Object 更合適。

1.接收的參數

二維數組

數組作為參數。該數組的成員是一個個表示鍵值對的數組。

const map = new Map([
  ['name', '張三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"

2.同樣的值的兩個實例，在 Map 結構中被視為兩個鍵。

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

對於引用數據類型，相同值的key  為不同的內存地址

對於普通數據類型  后面覆蓋前面

const map = new Map();

const k1 = 1;
const k2 = 1;

map
.set(k1, 111)
.set(k2, 222);

map.get(k1) // 222
map.get(k2) // 222

3.遍歷方法

• Map.prototype.keys()：返回鍵名的遍歷器。
• Map.prototype.values()：返回鍵值的遍歷器。
• Map.prototype.entries()：返回所有成員的遍歷器。
• Map.prototype.forEach()：遍歷 Map 的所有成員

Map 的遍歷順序就是插入順序

for (let [key, value] of map.entries()) {
  console.log(key, value);
}

for (let [key, value] of map) {
  console.log(key, value);
}

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

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['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()
  .set(1, 'a')
  .set(2, 'b')
  .set(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'}

forEach  中間函數的 行參順序 與其他不同  先是value 再是key(map也是 filter也是)