ECMAScript6中Map/WeakMap詳解_javascript技巧

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
有以下方法

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