JavaScript中Map的使用方法

创建Map

（1）使用Map构造函数创建映射对象（可传入一个可迭代对象，需要包含键/值对数组）

const m = new Map()
const m1 = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])
const m2 = new Map({
    [Symbol.iterator]: function* () {
        yield ['key1', 'val1']
        yield ['key2', 'val2']
        yield ['key3', 'val3']
    }
})

映射期待的键/值对，无论是否提供

const m3 = new Map([[]])
console.log(m3.has(undefined))      // true
console.log(m3.get(undefined))      // undefined

 

查询方法

（1）利用 has(key) 方法可查询是否存在某个键

const m = new Map([
    ['firstName', 'Matt']
])
console.log(m.has('firstName'))     // true
console.log(m.has('lastName'))      // false

（2）利用 get(key) 方法可获取键对应的值

const m = new Map([
    ['firstName', 'Matt']
])
console.log(m.get('firstName'))     // Matt
console.log(m.get('lastName'))      // undefined

 

操作方法

（1）使用 set(key, value) 方法插入键/值对，返回映射实例，因此可进行链式操作

const m = new Map().set('key1', 'val1')
    .set('key2', 'val2')
    .set('key3', 'val3')
console.log(m.size)     // 3

Map可以使用任何JavaScript数据类型作为键

Map中映射的值与Object类似，没有限制

Map内部使用SameValueZero比较操作（ECMAScript规范内部定义，语言中不能使用），基本上相当于使用严格对象相等的标准来检查键的匹配性

const m = new Map()

const functionKey = function () {}
const symbolKey = Symbol()
const objectKey = new Object()

m.set(functionKey, 'functionValue')
m.set(symbolKey, 'symbolValue')
m.set(objectKey, 'objectValue')

console.log(m.get(functionKey))     // functionValue
console.log(m.get(symbolKey))       // symbolValue
console.log(m.get(objectKey))       // objectValue

console.log(m.get(function () {}))  // undefined

用作键和值的对象及其他“集合”类型，在自己的内容或属性被修改时仍然保持不变

const m = new Map()

const objKey = {},
    objVal = {},
    arrKey = [],
    arrVal = []

m.set(objKey, objVal)
m.set(arrKey, arrVal)

objKey.foo = 'foo'
objVal.bar = 'bar'
arrKey.push('foo')
arrVal.push('bar')

console.log(m.get(objKey))      // {bar: 'bar'}
console.log(m.get(arrKey))      // ['bar]

SameValueZero比较也可能导致意想不到的冲突

const m = new Map()

const a = 0 / ' ',
    b = 0 / ' ',
    pz = +0,
    nz = -0

console.log(a === b)        // false
console.log(pz === nz)      // true

m.set(a, 'foo')
m.set(pz, 'bar')

console.log(m.get(a))       // foo
console.log(m.get(nz))      // bar

（2）使用size属性获取映射中的键/值对数量

const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])

console.log(m.size)     // 3

（3）使用 delete() 方法和 clear() 方法删除值

const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])

console.log(m.size)             // 3

console.log(m.has('key1'))      // true
m.delete('key1')
console.log(m.has('key1'))      // false

// 清除这个映射实例中所有键/值对
m.clear()
console.log(m.size)             // 0

 

顺序与迭代

Map会维护键值对的插入顺序

（1）映射实例提供一个迭代器（Iterator），能以插入顺序生成[key, value]形式的数组

可以通过 entries() 方法（或者Symbol.iterator属性，它引用 entries() ）取得这个迭代器

const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])

console.log(m.entries === m[Symbol.iterator])     // true

for (let pair of m.entries()) {
    console.log(pair)
}
// ['key1', 'val1']
// ['key2', 'val2']
// ['key3', 'val3']

for (let pair of m[Symbol.iterator]()) {
    console.log(pair)
}
// ['key1', 'val1']
// ['key2', 'val2']
// ['key3', 'val3']

entries() 是默认迭代器，可以直接对映射实例使用扩展操作，把映射转换为数组

const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])

console.log([...m])     // [['key1', 'val1'], ['key2', 'val2'], ['key3', 'val3']]

（2）调用映射的 forEach(callback, opt_thisArg) 方法并传入回调，依次迭代每个键/值对

第一个参数：回调函数(值, 键)

第二个参数：回调函数内部this的值

const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])

m.forEach((val, key) => console.log(`${key} -> ${val}`))
// key1 -> val1
// key2 -> val2
// key3 -> val3

keys() 和 values() 分别返回以插入顺序生成键和值的迭代器

const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3']
])

for (let key of m.keys()) {
    console.log(key)
}
// key1
// key2
// key3

for (let val of m.values()) {
    console.log(val)
}
// val1
// val2
// val3

键和值在迭代器遍历时是可以修改的，但映射内部的引用则无法修改

const m = new Map([
    ['key1', 'val1']
])

for (let key of m.keys()) {
    key = 'newKey'
    console.log(key)                // newKey
    console.log(m.get('key1'))      // val1
}

const keyObj = {id: 1}

const m1 = new Map([
    [keyObj, 'val1']
])

// 修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值
for (let key of m1.keys()) {
    key.id = 'newKey'
    console.log(key)                // {id: 'newKey'}
    console.log(m1.get(keyObj))     // val1
}
console.log(keyObj)                 // {id: 'newKey'}

 

选择Object还是Map

（1）内存占用

Object和Map的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map大约可以比Object多存储50%的键/值对

（2）插入性能

向Object和Map中插入新键/值对的消耗大致相当，不过插入Map在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。如果代码涉及大量插入操作，那么显然Map的性能更佳

（3）查找速度

与插入不同，从大型Object和Map中查找键/值对的差异极小，但如果只包含少量键/值对，则Object有时候速度更快。在把Object当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对Map来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择Object更好一些

（4）删除性能

使用delete删除Object属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性设置为undefined或null。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map的delete()操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择Map