ECMAScript6中Map/WeakMap詳解

2019-11-20 12:16:40

字體：大中小

供稿：網(wǎng)友

JS的對象本身就是個鍵值結(jié)構(gòu)，ES6為什么還需要加Map呢，它與普通的JS對象有何區(qū)別？

一、Map

1. Map構(gòu)造器

先看Map的簡單用法

// 字符串作為key， 和JS對象類似var map = new Map()// setmap.set('name', 'John')map.set('age', 29)// getmap.get('name') // Johnmap.get('age') // 29

這么對代碼，看起來確實沒有JS對象簡潔

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

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

以上演示了用對象作為key的Map。以下為圖示

Map構(gòu)造器還支持傳數(shù)組方式

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

2. 迭代

和Set一樣用for of來迭代Map，鍵調(diào)用map.keys()，值調(diào)用map.values()，鍵值實體調(diào)用map.entries()

var map = new Map()// setmap.set('name', 'John')map.set('age', 29)// getmap.get('name') // 'John'map.get('age') // 29 // 遍歷keyfor (var key of map.keys()) {  console.log(key)} // 遍歷valuefor (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. 方法和屬性