ECMAScript6中Map/WeakMap詳解

ECMAScript6中Map/WeakMap詳解

JS的物件本身就是個鍵值結構,ES6為什麼還需要加Map呢,它與普通的JS物件有何區別?

一、Map

1. Map構造器

先看Map的簡單用法


// 字串作為key, 和JS物件類似
var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // John
map.get('age') // 29

這麼對程式碼,看起來確實沒有JS物件簡潔

但Map的強大之處在於它的key可以是任意型別


// 物件作為key演示
var xy = {x: 10, y: 20}  // 座標
var wh = {w: 100, h: 200} // 寬高
var map = new Map()
// set
map.set(xy, '座標')
map.set(wh, '寬高')
// get
map.get(xy) // '座標'
map.get(wh) // '寬高'

以上演示了用物件作為key的Map。以下為圖示

Map構造器還支援傳陣列方式


var map = new Map([["name", "John"], ["age", "29"]])
// 遍歷key
for (var key of map.keys()) {
console.log(key) // name, age
}

2. 迭代

和Set一樣用for of來迭代Map,鍵呼叫map.keys(),值呼叫map.values(),鍵值實體呼叫map.entries()


var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // 'John'
map.get('age') // 29
// 遍歷key
for (var key of map.keys()) {
console.log(key)
}
// 遍歷value
for (var val of map.values()) {
console.log(val)
}
// 遍歷實體
for (var arr of map.entries()) {
console.log('key: '   arr[0]   ', value: '   arr[1])
}
// 遍歷實體的簡寫
for (var [key, val] of map.entries()) {
console.log('key: '   key   ', value: '   val)
}

3. 方法和屬性

二、WeakMap

與Map的區別

不接受基本型別的值作為鍵名
沒有keys、values、entries和size
有以下方法

以上所述就是本文的全部內容了,希望大家能夠喜歡。

您可能感興趣的文章:

ECMAScript6 新特性範例大全ECMAScript6輪播圖實踐知識總結ECMAScript6快速入手攻略ECMAScript6中Set/WeakSet詳解ECMAScript6塊級作用域及新變數宣告(let)ECMAScript6新增值比較函式Object.isECMAScript6函式剩餘引數(Rest Parameters)ECMAScript6函式預設引數ECMAScript6的新特性箭頭函式(Arrow Function)詳細介紹ECMAScript6–解構