在ES5中，我們使用的是對(duì)象的方式來(lái)存儲(chǔ)鍵值對(duì)，鍵是屬性名，值是屬性值，這種方法有以下問(wèn)題

1）鍵名只能是字符串

2）獲取數(shù)據(jù)的數(shù)量不方便

3）鍵名容易跟原型上的名稱沖突

ES6中新增了map集合專門用于存儲(chǔ)多個(gè)鍵值對(duì)數(shù)據(jù)。?鍵值對(duì)（key value pair）數(shù)據(jù)集合的特點(diǎn)：鍵不可重復(fù)。

1.創(chuàng)建map

1）new Map() —— 創(chuàng)建一個(gè)空的map

2）new Map(iterable) ——? 創(chuàng)建一個(gè)具有初始內(nèi)容的map，初始內(nèi)容來(lái)自于可迭代對(duì)象每一次迭代的結(jié)果，但是，它要求每一次迭代的結(jié)果必須是一個(gè)長(zhǎng)度為2的數(shù)組，數(shù)組第一項(xiàng)表示鍵，數(shù)組的第二項(xiàng)表示值

【例1】

const mp1 = new Map(); const mp2 = new Map([["a", 3], ["b", 2], ["c", 6]]); console.log('mp1:', mp1); console.log('mp2:', mp2);

【結(jié)果】?

2.方法

1）size：只讀屬性，獲取當(dāng)前map中鍵的數(shù)量

【例2】

const mp2 = new Map([["a", 3], ["b", 2], ["c", 6]]); console.log('mp2的size：',mp2.size);

【結(jié)果】?

2）set(鍵，值)：設(shè)置一個(gè)鍵值對(duì)，鍵和值可以是任何類型：如果鍵不存在，則添加一項(xiàng)；如果鍵已存在，則修改它的值；比較鍵的方式和set相同

【例3】

const mp2 = new Map([["a", 3], ["b", 2], ["c", 6]]); console.log('原始mp2：',mp2) const obj = {} mp2.set(obj, 13); console.log('添加obj后的mp2：',mp2); mp2.set("a",4); console.log('修改a的值后的mp2：',mp2);

【結(jié)果】

?3）get(鍵)：根據(jù)一個(gè)鍵得到對(duì)應(yīng)的值

4）has(鍵)：判斷某個(gè)鍵是否存在

5）delete(鍵)：刪除指定的鍵

6）clear()：清空map

3.和數(shù)組互相轉(zhuǎn)換

【例4】

const mp2 = new Map([["a", 3], ["b", 2], ["c", 6]]); //map => array const arr = [...mp2]; console.log(arr); //array => map const mp3 = new Map(arr); console.log(mp3);

【結(jié)果】

4.遍歷

1）for-of：每次迭代得到的是一個(gè)長(zhǎng)度為2的數(shù)組

【例5】

const mp2 = new Map([["a", 3], ["b", 2], ["c", 6]]); for (const iterator of mp2) {console.log(iterator); }

【結(jié)果】

?

2）forEach：通過(guò)回調(diào)函數(shù)遍歷

參數(shù)1：每一項(xiàng)的值

參數(shù)2：每一項(xiàng)的鍵

參數(shù)3：map本身

【例6】

const mp2 = new Map([["a", 3], ["b", 2], ["c", 6]]); mp2.forEach((item, index, mp) => {console.log(item, index, mp) });

【結(jié)果】

?

?

總結(jié)

以上是生活随笔為你收集整理的map，存储多个键值对的数据集合的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。