js的Map函數(shù)怎么使用

本文小編為大家詳細(xì)介紹“js的Map函數(shù)怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“js的Map函數(shù)怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

Map是ES2015引入的Global Object，
Map對(duì)象中保存了鍵值對(duì)，且任何對(duì)象（包括原始值）都可以作為鍵或者值。

1. 構(gòu)造函數(shù)

Map必須作為構(gòu)造函數(shù)來(lái)使用，

new Map([iterable])

它的參數(shù)是可選的，如果提供的話，必須是一個(gè)iterable對(duì)象。
iterable對(duì)象的迭代結(jié)果為，[key1, value1], [key2, value2], ...。

例如

// 1. 數(shù)組是一個(gè)iterable對(duì)象
m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}

// 2. generator會(huì)返回一個(gè)iterable對(duì)象
gen = function*(){
  yield [1, 'a'];
  yield [2, 'b'];
}
iter = gen();
m = new Map(iter);    // Map(2) {1 => "a", 2 => "b"}

2. 實(shí)例屬性

m.size用來(lái)獲取key的個(gè)數(shù)，

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
m.size    // 2

3. 實(shí)例方法

（1）m.has(key)，判斷key是否存在
（2）m.get(key)，取值，如果沒(méi)有這個(gè)key就返回undefined（3）m.set(key, value)，設(shè)值，返回m（4）m.delete(key)，如果key存在且已經(jīng)被刪除了就返回true，如果key不存在就返回false。
（5）m.clear()，刪除所有鍵值對(duì)

（6）m.keys()，返回一個(gè)iterable對(duì)象，其中包含了按插入順序迭代的所有key

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.keys()]    // [1, 2]

（7）m.values()，返回一個(gè)iterable對(duì)象，其中包含了按插入順序迭代的所有value

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.values()]    // ["a", "b"]

（8）m.entries()，返回一個(gè)iterable對(duì)象，每一個(gè)元素是[key, value]，遍歷順序按key的插入順序

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.entries()]    // [[1, "a"], [2, "b"]]

注：更便捷的得到二維數(shù)組的方法是使用Array.from，它可以直接接受Map作為參數(shù)，

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
Array.from(m)    // [[1, "a"], [2, "b"]]

Array.from也可以接受iterable對(duì)象，

Array.from(m.keys())    // [1, 2]
Array.from(m.values())    // ["a", "b"]
Array.from(m.entries())    // [[1, "a"], [2, "b"]]

（9）m.forEach(fn[, thisArg])，用于對(duì)Map以key的插入順序進(jìn)行遍歷

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
m.forEach((value, key)=>{
    value    // "a", "b"
    key      // 1, 2
});

注：第一個(gè)參數(shù)是value，第二個(gè)參數(shù)才是key。

除了使用m.forEach，Map還可以使用for ... of進(jìn)行遍歷，

m = new Map([[1, 'a'], [2, 'b']]);
for(i of m){
  i    // [1, 'a'], [2, 'b']
}

4. key的相等性判斷

Map key的相等性判斷，使用了所謂的“SameValueZero”算法：
（1）在做key的相等性判斷時(shí)，NaN被認(rèn)為與NaN相等。（即使NaN !== NaN）
（2）其他種類的key，依據(jù)===運(yùn)算符進(jìn)行判斷。
（3）目前+0和-0被認(rèn)為相等是符合ES2015規(guī)范的，但是會(huì)有瀏覽器兼容性問(wèn)題。

5. Map與Object對(duì)比

（1）Object的key只能是字符串（String）或符號(hào)（Symbol），
而Map的key可以是任意值，包括函數(shù)，對(duì)象（object）或者任何原始值（primitive value）。

（2）對(duì)于Map來(lái)說(shuō)，可以通過(guò)size屬性直接獲取key的個(gè)數(shù)，
而Object則需要Object.keys(xxx).length來(lái)間接獲取自身屬性的個(gè)數(shù)。

（3）Map實(shí)例是一個(gè)iterable對(duì)象，可以直接用來(lái)遍歷，
而Object需要先獲取它的key，再使用key進(jìn)行遍歷。

（4）Object可以有原型對(duì)象，自身屬性可能會(huì)無(wú)意間與原型屬性相沖突。
（雖然ES2015中可以通過(guò)Object.create(null)來(lái)創(chuàng)建一個(gè)無(wú)原型的對(duì)象。）

（5）Map key的添加刪除操作更加高效。

讀到這里，這篇“js的Map函數(shù)怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。