js的Map函數(shù)使用方法詳解
Map是ES2015引入的Global Object,Map對象中保存了鍵值對,且任何對象(包括原始值)都可以作為鍵或者值。
1. 構(gòu)造函數(shù)
Map必須作為構(gòu)造函數(shù)來使用,
new Map([iterable])
它的參數(shù)是可選的,如果提供的話,必須是一個iterable對象。iterable對象的迭代結(jié)果為,[key1, value1], [key2, value2], ...。
例如
// 1. 數(shù)組是一個iterable對象
m = new Map([[1, 'a'], [2, 'b']]); // Map(2) {1 => "a", 2 => "b"}
// 2. generator會返回一個iterable對象
gen = function*(){
yield [1, 'a'];
yield [2, 'b'];
}
iter = gen();
m = new Map(iter); // Map(2) {1 => "a", 2 => "b"}
2. 實例屬性
m.size用來獲取key的個數(shù),
m = new Map([[1, 'a'], [2, 'b']]); // Map(2) {1 => "a", 2 => "b"}
m.size // 2
3. 實例方法
(1)m.has(key),判斷key是否存在
(2)m.get(key),取值,如果沒有這個key就返回undefined(3)m.set(key, value),設(shè)值,返回m(4)m.delete(key),如果key存在且已經(jīng)被刪除了就返回true,如果key不存在就返回false。
(5)m.clear(),刪除所有鍵值對
(6)m.keys(),返回一個iterable對象,其中包含了按插入順序迭代的所有key
m = new Map([[1, 'a'], [2, 'b']]); // Map(2) {1 => "a", 2 => "b"}
[...m.keys()] // [1, 2]
(7)m.values(),返回一個iterable對象,其中包含了按插入順序迭代的所有value
m = new Map([[1, 'a'], [2, 'b']]); // Map(2) {1 => "a", 2 => "b"}
[...m.values()] // ["a", "b"]
(8)m.entries(),返回一個iterable對象,每一個元素是[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對象,
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]),用于對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
});
注:第一個參數(shù)是value,第二個參數(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的相等性判斷時,NaN被認(rèn)為與NaN相等。(即使NaN !== NaN)
(2)其他種類的key,依據(jù)===運算符進(jìn)行判斷。
(3)目前+0和-0被認(rèn)為相等是符合ES2015規(guī)范的,但是會有瀏覽器兼容性問題。
5. Map與Object對比
(1)Object的key只能是字符串(String)或符號(Symbol),
而Map的key可以是任意值,包括函數(shù),對象(object)或者任何原始值(primitive value)。
(2)對于Map來說,可以通過size屬性直接獲取key的個數(shù),
而Object則需要Object.keys(xxx).length來間接獲取自身屬性的個數(shù)。
(3)Map實例是一個iterable對象,可以直接用來遍歷,
而Object需要先獲取它的key,再使用key進(jìn)行遍歷。
(4)Object可以有原型對象,自身屬性可能會無意間與原型屬性相沖突。
(雖然ES2015中可以通過Object.create(null)來創(chuàng)建一個無原型的對象。)
(5)Map key的添加刪除操作更加高效。
更多關(guān)于js中的Map函數(shù)使用方法請查看下面的相關(guān)鏈接
相關(guān)文章
Javascript入門學(xué)習(xí)第九篇 Javascript DOM 總結(jié)
作為一個js-DOM開發(fā)者,你必須知道的一些DOM方法:2008-07-07
JavaScript中使用Math.floor()方法對數(shù)字取整
這篇文章主要介紹了JavaScript中使用Math.floor()方法對數(shù)字取整,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
Web Inspector:關(guān)于在 Sublime Text 中調(diào)試Js的介紹
本篇文章小編將為大家介紹,Web Inspector:關(guān)于在 Sublime Text 中調(diào)試Js的介紹。需要的朋友可以參考一下2013-04-04
詳解JavaScript實現(xiàn)設(shè)計模式中的適配器模式的方法
適配器模式可以根據(jù)需求轉(zhuǎn)換(或調(diào)整)一個接口,創(chuàng)建含有您所需接口的另一個對象,并將它連接到您想改變接口的對象,從而完成這種轉(zhuǎn)換,下面就來詳解JavaScript實現(xiàn)設(shè)計模式中的適配器模式的方法2016-05-05
想學(xué)習(xí)javascript JS和jQuery哪個重要 先學(xué)哪個
在一些技術(shù)論壇與qq群經(jīng)??吹接羞@樣類似的提問,當(dāng)然提出這樣問題的通常都是新手為了解決大家的疑惑,同時幫助新手程序員能更快掌握學(xué)習(xí)的方向,不致于弄錯重點2016-12-12
不得不看之JavaScript構(gòu)造函數(shù)及new運算符
這篇文章主要介紹了JavaScript構(gòu)造函數(shù)及new運算符,通過認(rèn)識new運算符,代碼解讀,重點解析,new存在的意義,總結(jié)等全面介紹了知識點,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08

