“

作者：Kyle Cook
?????? 網(wǎng)站：Web Dev Simplified Blog
?????? 字?jǐn)?shù)：1975 字 (非直譯)
?????? 閱讀:? ?5 分鐘

一、開(kāi)篇語(yǔ)

在日常的業(yè)務(wù)開(kāi)發(fā)中，以下的代碼你是否經(jīng)常見(jiàn)或經(jīng)常寫(xiě)呢？

const?CURRENCY_MAP?=?{
??'United?States':?'USD',
??'India':?'Rupee'
}

const?currency?=?CURRENCY_MAP['India']

或者

const?CURRENCIES?=?[
??{?name:?'USD',?country:?'United?States'?},
??{?name:?'Rupee',?country:?'India'?}
]

const?currency?=?CURRENCIES.find(c?=>?c.country?===?'India').name

以上代碼確實(shí)沒(méi)有問(wèn)題，我們?cè)跇I(yè)務(wù)中經(jīng)常用，但是需要?jiǎng)?chuàng)建鍵值映射關(guān)系時(shí)，objects 對(duì)象 和 arrays 數(shù)組 通常不是最佳選擇，這也是 JS Maps 存在的理由，今天我們就來(lái)簡(jiǎn)單的聊一聊 JS Maps 集合對(duì)象。

二、Objects 和 Maps 的區(qū)別

Map 其實(shí)是是 JS 中的 Class 類，允許你將值存儲(chǔ)在特定的鍵上，但是與 Objects 對(duì)象 有一些主要的區(qū)別，這些特質(zhì)，主要是讓 Map 在鍵值應(yīng)用上表現(xiàn)的更加出色。

1、鍵的類型（Key Types）

對(duì)于 Objects 類型而言，你只能使用字符串作為鍵的類型（ES6 中也可以是 Symbol 類型），但是 Map 則更寬泛的多，你可以使用任何數(shù)據(jù)類型作為鍵，比如你可以使用 object, string, boolean, function 等類型，接下來(lái)我們來(lái)看看下面兩段代碼：

const?obj?=?{
??a:?'b',
??1:?2
}

console.log(Object.keys(obj))
//?["a",?"1"]

const?map?=?new?Map([
??['a',?'b'],
??[1,?2],
??[{?key:?'value'?},?'obj']
])

console.log(map.keys())
//?["a",?1,?{?key:?"value"?}]

創(chuàng)建 map 你需要通過(guò)數(shù)組的形式進(jìn)行創(chuàng)建，我們可以通過(guò) map.keys() 方法獲取 map 對(duì)象的鍵，以數(shù)組的形式返回所有的鍵。

2、順序（Ordering）

object 對(duì)象 鍵的順序是不可靠的，直到 ES6 才對(duì)其進(jìn)行規(guī)范（自 ECMAScript 2015 規(guī)范以來(lái)，對(duì)象確實(shí)保留了字符串和 Symbol 鍵的創(chuàng)建順序；因此，在只有字符串鍵的對(duì)象上進(jìn)行迭代將按插入順序產(chǎn)生鍵），則 Map 對(duì)象 則不同，當(dāng)我們對(duì)其進(jìn)行迭代時(shí)，則是按照其插入的鍵值順序返回的，這個(gè)特性很重要。

3、迭代（Iterating）

相對(duì)迭代操作，Maps 相對(duì) objects 更加容易，對(duì)象沒(méi)有內(nèi)置的迭代方法，需要借助 Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組，Maps 則天生具有迭代性，這意味著你可以使用 forEach 方法作用于 Maps 上進(jìn)行迭代。

4、長(zhǎng)度（Length）

獲取 objects 的長(zhǎng)度并不容易，你需要手動(dòng)計(jì)算，并且比較麻煩。但是 Maps 有個(gè) size 屬性，類似 arrays 數(shù)組 的 length 屬性 能夠準(zhǔn)確的獲取 Maps 鍵/值對(duì)的個(gè)數(shù)。

5、性能（Performance）

由于 Maps 設(shè)計(jì)的初衷就是為了解決 鍵/值 查找，因此在頻繁的增刪 鍵/值 操作的場(chǎng)景下，Map 的性能會(huì)更好，則 objects 則沒(méi)有在這種頻繁操作 鍵/值 的場(chǎng)景進(jìn)行優(yōu)化。

三、如何使用 Maps

通過(guò)上面的介紹，我們已經(jīng)了解了 Maps 和 objects 的區(qū)別，接下來(lái)聊聊如何使用 Maps。

1、創(chuàng)建 Map（Creating A Map）

在上面的例子中，你也許看到了我們是如何創(chuàng)建 Map 的，Map 是一個(gè) Class 類，需要進(jìn)行實(shí)例化，如果你只實(shí)例化，不進(jìn)行傳參的話，則是一個(gè)空對(duì)象。如果需要填充內(nèi)容的話，需要往里添加可迭代的對(duì)象值，比如數(shù)組，第一個(gè)是鍵，第二個(gè)是鍵對(duì)應(yīng)的值。

const?emptyMap?=?new?Map()
const?map?=?new?Map([
??['key',?'value']
])

2、設(shè)置值（Setting Values）

一旦你創(chuàng)建了 Map，接下來(lái)你很有可能需要往里填充 鍵/值 內(nèi)容，我們可以使用 set 方法，進(jìn)行 鍵/值 設(shè)置，如下段代碼所示：

const?map?=?new?Map()

map.set('key',?'value')
map.set(true,?'boolean')
//?"key"?=>?"value"
//?true?=>?"boolean"

3、獲取值（Getting Values）

獲取值和設(shè)置值一樣簡(jiǎn)單，我們可以通過(guò) get 方法，并且傳遞一個(gè)你想獲取鍵的參數(shù)，就能獲取對(duì)應(yīng)的值。如果鍵不存在，則返回 undefined。

const?map?=?new?Map()
map.set('key',?'value')
map.set(true,?'boolean')

map.get('key')
//?"value"
map.get(true)
//?"boolean"
map.get('wrong-key')
//?undefined

4、確認(rèn)鍵是否存在（Checking For Values）

有時(shí)你需要查看 Map 對(duì)應(yīng)的鍵是否存在，你可以使用 has 方法 檢查對(duì)應(yīng)的鍵是否存在。

const?map?=?new?Map()
map.set(1,?'number')

map.has(1)
//?true
map.has('1')
//?false
map.has('wrong-key')
//?false

您可能會(huì)注意到，檢查鍵時(shí)，字符串”1“將返回 false。這是因?yàn)?Map 可以存儲(chǔ)任何類型，所以數(shù)字 1 存儲(chǔ)為數(shù)字而不是字符串。

5、刪除鍵/值(Removing Values)

增刪改查是我們最常見(jiàn)的業(yè)務(wù)操作，如果你要進(jìn)行刪除操作，同樣對(duì)于 Map 也十分簡(jiǎn)單，我們可以使用 delete 方法傳遞你要?jiǎng)h除的鍵。

const?map?=?new?Map()
map.set(1,?'number')
map.set('a',?'b')

map.delete(1)
map.has(1)
//?false

6、迭代操作（Iterating Over A Map）

有很多方法可以迭代遍歷 Map，但是最常見(jiàn)的方法就是通過(guò) forEach 方法 進(jìn)行迭代。類似數(shù)組的 forEach 方法，但是這個(gè)回調(diào)方法里，含有兩個(gè)參數(shù)，一個(gè)表示值，一個(gè)表示鍵。

const?map?=?new?Map()
map.set(1,?'number')
map.set('a',?'b')

map.forEach((value,?key)?=>?{
??console.log(`${key}?=>?${value}`)
})
//?1?=>?number
//?a?=>?b

四、其它有用的方法和屬性

• 你可以使用 size 屬性 獲取 Map 鍵/值對(duì)的個(gè)數(shù)。
• 你可以使用 keys() 方法獲取 Map 中所有的鍵，返回一個(gè)可迭代的數(shù)組。
• 你可以使用 values() 方法獲 Map 中所有的值，返回一個(gè)可迭代的數(shù)組。
• 你可以使用 entries() 方法獲得包含鍵/值對(duì)的數(shù)組集合。
• 你可以使用 clear() 方法清空 Map 中所有的鍵/值內(nèi)容。

五、結(jié)束語(yǔ)

Maps 是一個(gè)很棒的數(shù)據(jù)類型，當(dāng)我們需要頻繁使用鍵值字典查找操作時(shí)，是一個(gè)不錯(cuò)的選擇。今天的內(nèi)容就到這里，感謝你的閱讀。