js的Map函數(shù)使用方法詳解
Map
是ES2015引入的Global Object,Map
對(duì)象中保存了鍵值對(duì),且任何對(duì)象(包括原始值)都可以作為鍵或者值。
1. 構(gòu)造函數(shù)
Map
必須作為構(gòu)造函數(shù)來(lái)使用,
new Map([iterable])
它的參數(shù)是可選的,如果提供的話(huà),必須是一個(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)其他種類(lèi)的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的添加刪除操作更加高效。
更多關(guān)于js中的Map函數(shù)使用方法請(qǐng)查看下面的相關(guān)鏈接
相關(guān)文章
JavaScript 中的執(zhí)行上下文和執(zhí)行棧實(shí)例講解
這篇文章主要介紹了JavaScript 中的執(zhí)行上下文和執(zhí)行棧實(shí)例講解,文中實(shí)例講解的很清晰,有感興趣的同學(xué)可以研究下2021-02-02javascript代碼運(yùn)行不出來(lái)執(zhí)行錯(cuò)誤的可能情況整理
js代碼運(yùn)行不出來(lái)的情況在項(xiàng)目中經(jīng)常發(fā)生,究竟是什么原因呢?在本文整理了一些常見(jiàn)的情況,感興趣的各位朋友可以參考下2013-10-10JavaScript中CreateTextFile函數(shù)
JavaScript中CreateTextFile函數(shù)是創(chuàng)建指定的文件名并返回一個(gè) TextStream 對(duì)象,可以使用這個(gè)對(duì)象對(duì)文件進(jìn)行讀寫(xiě)2020-08-08再JavaScript的jQuery庫(kù)中編寫(xiě)動(dòng)畫(huà)效果的指南
這篇文章主要介紹了再JavaScript的jQuery庫(kù)中編寫(xiě)動(dòng)畫(huà)效果的指南,包括一些內(nèi)建的效果方法的使用示例,需要的朋友可以參考下2015-08-08JS難點(diǎn)同步異步和作用域與閉包及原型和原型鏈詳解
本篇文章主要來(lái)為大家講解JS學(xué)習(xí)中的三大難點(diǎn),JS同步異步的作用域,JS閉包原型以及JS原型鏈的詳細(xì)解析,有需要的同學(xué)可以借鑒參考下,希望可以有所幫助2021-09-09深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07