JavaScript語(yǔ)言主要應(yīng)用于web開發(fā)中，它是一種簡(jiǎn)單易如門的腳本語(yǔ)言，在JavaScript ES6中引入了一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，叫做 maps。 Maps是設(shè)計(jì)用來代替使用Object Literal進(jìn)行鍵值對(duì)存儲(chǔ)的數(shù)據(jù)結(jié)構(gòu)，它需要鍵值唯一，并且為循環(huán)提供了很多可用的方法。在這篇文章中西安尚學(xué)堂小編給大家介紹JavaScript ES6中的Maps。

使用Object literals 作為 “Maps”

Object literals是JavaScript中最基礎(chǔ)的功能了，沒有之一。創(chuàng)建一個(gè)Map只需要以下這樣簡(jiǎn)單的代碼：

　　var map = {
　　"key1":"value1",
　　"key2":"value2"
　　}
　　map.key1; // == "value1"

很多情況下，Object literals都可以當(dāng)作Maps正常使用，但有一些情況不能。比如可能會(huì)有和Object 原型方法重名的自變量，比如：

　　var map = {
　　"key1":"value1",
　　"key2":"value2"
　　}
　　map.toString() == "[object Object]" // Correct
　　map.toString = "value3"
　　map.toString(); // Uncaught TypeError: a.toString is not a function

使用object literals的另一個(gè)缺點(diǎn)是所有的鍵必須是字符串string類型的變量。多數(shù)情況下這樣做沒問題，但如果想使用原始類型的值作為Key值，系統(tǒng)會(huì)默認(rèn)將這個(gè)原始類型轉(zhuǎn)換為string類型。這種情況在黑盒內(nèi)發(fā)生時(shí)，用戶就可能遇到意外的結(jié)果。比如下例，使用一個(gè)數(shù)組作為鍵值，

　　map[[1,2,3]] = "value4" // the provided key is an array
　　map['1,2,3'] = "value4" // the system has made the key a string

使用object literals還有一個(gè)問題：即無法保證鍵值的順序。添加鍵值的順序并不是可能被循環(huán)取出值的時(shí)候的鍵值的順序。例如

　　var o = {}
　　o.a = 1
　　o.b = 2
　　o.c = 3
　　for(key in o) console.log(key);
　　// expected a,b,c - but not guaranteed to be in that order

Object 對(duì)象也缺乏forEach的方法，不能對(duì)object使用通常的迭代方法

　　o.forEach // undefined

ES6的Maps

ES6就解決以上問題提供了一個(gè)這個(gè)Map對(duì)象類型。你可以使用new Map([iterable])來創(chuàng)建一個(gè)可迭代的對(duì)象。Iterable對(duì)象可以是一個(gè)數(shù)組或者任意可遍歷的并且具有鍵值對(duì)的對(duì)象。他們的鍵值對(duì)會(huì)被自動(dòng)添加到新創(chuàng)建的Map對(duì)象中去。

　　var m = new Map()
　　m.set('a', 1)
　　m.set('b', 2)
　　// {"a" => 1, "b" => 2}

Map的屬性和方法

Map提供了一個(gè)非常方便的.size屬性，來返回對(duì)象的鍵值數(shù)量。Chrome控制臺(tái)也可以直接顯示這個(gè)Map對(duì)象及.size的屬性大小。

　　var m = new Map()
　　m.set('a', 1)
　　m.set('b', 2)
　　m.size; // 2

　　m; // Map(2) {"a" => 1, "b" => 2}

map.clear()

清空map對(duì)象中所有項(xiàng)。

map.delete(key)

刪除鍵值為key的項(xiàng)，返回值為是否成功刪除。

　　var m = new Map()
　　m.set('a', 1)
　　m.set('b', 2)
　　m.delete('a'); // true
　　m.delete('c'); // false (key was not there to delete)

map.get(key), map.has(key)

取值，以及判斷給定key值是否存在。

　　m.get('a'); // 1
　　m.has('a'); // true
　　m.has('z'); // false

map.forEach(fn)

方便的對(duì)當(dāng)前map進(jìn)行迭代，取得map的鍵值對(duì)。

　　var m = new Map()
　　m.set('a', 1)
　　m.set('b', 2)
　　m.forEach((k, v, m) => console.log(key:${k} value:${v} map:${m}))
　　// key:1 value:a map:[object Map]
　　// key:2 value:b map:[object Map]

for..of

另一種遍歷map的方法是使用 for..of語(yǔ)法，也可以方便獲得map的鍵值對(duì)。

　　for([key,value] of m)
　　console.log(key + '=' + value)
　　// a=1
　　// b=2

m.keys()

返回一個(gè)功能完善的迭代器，這樣就可以根據(jù)需求使用.next()方法依次獲得map所有的key值。

　　var m = new Map()
　　m.set('a', 1)
　　m.set('b', 2)

　　var iter = m.keys()
　　iter.next(); // Object {value: "a", done: false}
　　iter.next(); // Object {value: "b", done: false}
　　iter.next(); // Object {value: _undefined_, done: true}

m.values(), m.entries()

map的value和所有項(xiàng)可以通過這兩個(gè)方法迭代得到。.entries()方法會(huì)把key/value值作為數(shù)組給出。

　　var iter = m.values()
　　iter.next(); // Object {value: 1, done: false}
　　iter.next(); // Object {value: 2, done: false}
　　iter.next(); // Object {value: _undefined_, done: true}

　　var iter = m.entries()
　　iter.next(); // Object {value: ["a", 1], done: false}
　　iter.next(); // Object {value: ["b", 2], done: false}
　　iter.next(); // Object {value: _undefined_, done: true}

Map提供了各種對(duì)map中的key/value以及鍵值對(duì)進(jìn)行操作的方法。