关注前端小讴，阅读更多原创技术文章
Map
- Map 是 ECMAScript6 的新增特性，是一种新的集合类型，其大多数特性都可以通过 Object 类型实现
基本 API
- 使用new 关键字和Map 构造函数可以创建一个空映射
const m = new Map()
console.log(m) // Map(0) {}- 可以给 Map 构造函数传入一个可迭代对象，需要包含键/值对数组
// 嵌套数组初始化映射
const m1 = new Map([
['key1', 'val1'],
['key2', 'val2'],
['key3', 'val3'],
])
console.log(m1) // Map(3) { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
// 自定义迭代器初始化映射
const m2 = new Map({
[Symbol.iterator]: function* () {
yield ['key1', 'val1']
yield ['key2', 'val2']
yield ['key3', 'val3']
},
})
console.log(m2) // Map(3) { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }- 初始化后，可以使用
set()添加键/值对，使用get()和has()进行查询，通过size属性获取映射中的键值对数量，使用delete()和clear()删除值
const m3 = new Map()
console.log(m3.size) // 0
m.set('firstName', 'Matt').set('lastName', 'Frisbie')
console.log(m.has('firstName')) // true
console.log(m.get('firstName')) // 'Matt'
console.log(m.size) // 2
m.delete('firstName') // 删除这个键值对
console.log(m.has('firstName')) // false
console.log(m.get('firstName')) // undefined
console.log(m.has('lastName')) // true
console.log(m.size) // 1
m.clear() // 清除所有键值对
console.log(m.has('firstName')) // false
console.log(m.has('lastName')) // false
console.log(m.size) // 0set()方法返回映射实例，因此可以把多个操作连缀起来，从初始化到添加键/值对：
const m4 = new Map().set('key1', 'val1')
console.log(m4) // Map(1) { 'key1' => 'val1' }- 与
object只能使用数值、字符串或符号作为键不同，Map可以使用任何 JS 数据类型作为建
const m5 = new Map()
const functionKey = function () {}
const symbolKey = Symbol()
const objectKey = new Object()
m5.set(functionKey, 'functionValue')
.set(symbolKey, 'symbolValue')
.set(objectKey, 'objectValue')
console.log(m5.get(functionKey)) // 'functionValue'
console.log(m5.get(symbolKey)) // 'symbolValue'
console.log(m5.get(objectKey)) // 'objectValue'- 与
Object一样，若键或值是对象或其他“集合类型”，当键或值的内容或属性被修改时，映射也受到影响
const m6 = new Map()
const objKey = {},
objValue = {},
arrKey = [],
arrValue = []
m6.set(objKey, objKey)
m6.set(arrKey, arrValue)
console.log(m6) // Map(2) { {} => {}, [] => [] }
objKey.foo = 'foo'
objValue.bar = 'bar'
arrKey.push('foo')
arrValue.push('bar')
console.log(m6) // Map(2) { { foo: 'foo' } => { foo: 'foo' }, [ 'foo' ] => [ 'bar' ] }
console.log(m6.get(objKey)) // { foo: 'foo' }
console.log(m6.get(arrKey)) // [ 'bar' ]顺序与迭代
与
Object不同，Map会维护键值对的插入顺序（Object 是无序的），可以根据插入顺序执行迭代操作- 映射实例可以提供一个迭代器
Iterator，能以插入顺序生成[key,value]形式的数组 - 可以通过
entries()方法或Symbol.iterator属性取得这个迭代器
- 映射实例可以提供一个迭代器
const m7 = new Map([
['key1', 'val1'],
['key2', 'val2'],
['key3', 'val3'],
])
console.log(m7.entries === m7[Symbol.iterator]) // true
for (let pair of m7.entries()) {
console.log(pair)
/*
[ 'key1', 'val1' ]
[ 'key2', 'val2' ]
[ 'key3', 'val3' ]
*/
}
for (let pair of m7[Symbol.iterator]()) {
console.log(pair)
/*
[ 'key1', 'val1' ]
[ 'key2', 'val2' ]
[ 'key3', 'val3' ]
*/
}- 可以直接对映射实例使用扩展操作，把映射转换成数组
console.log([...m7]) // [ [ 'key1', 'val1' ], [ 'key2', 'val2' ], [ 'key3', 'val3' ] ]
console.log(...m7) // [ 'key1', 'val1' ] [ 'key2', 'val2' ] [ 'key3', 'val3' ]如果不使用迭代器，可调用
forEach(callBack,opt_thisArg)方法并传入回调，依次迭代每个键值对- 回调的第二个可选参数用于重写回调内部 this 的值
m7.forEach((val, key) => {
console.log(`${key}->${val}`)
/*
key1->val1
key2->val2
key3->val3
*/
})- 同
Array的迭代器方法，Map的keys()和values()分别返回以插入顺序生成的键和值的迭代器
for (let key of m7.keys()) {
console.log(key)
/*
key1
key2
key3
*/
}
for (let value of m7.values()) {
console.log(value)
/*
val1
val2
val3
*/
}迭代器遍历时，键和值均可被修改，不同类型的键或值修改会对映射造成不同影响：
- 修改原始值的键或值，或重写引用值的键或值，映射内部的引用无法修改，映射不受影响
- 修改引用值的键或值的属性，映射内部的引用未改变，映射不受影响
/* 字符串原始值作为键或值 */
const m8 = new Map([['key1', 'val1']])
for (let key of m8.keys()) {
key = 'newKey' // 修改键
console.log(key) // 'newKey'
console.log(m8.get('key1')) // 'val1'，映射内部的引用无法修改
console.log(m8.get('newKey')) // undefined
console.log(m8.get(key)) // undefined
}
console.log(m8) // Map(1) { 'key1' => 'val1' }，映射不受影响
/* 引用值作为键或值 */
const keyObj = { id: 1 }
const m9 = new Map([[keyObj, 'val2']])
for (let key of m9.keys()) {
key.id = 2 // 修改键的属性
console.log(key) // { id: 2 }
console.log(m9.get(key)) // val2，映射内部的引用未改变，对象在映射内部仍然引用相同的值
}
console.log(m9) // Map(1) { { id: 2 } => 'val2' }，映射受影响
for (let key of m9.keys()) {
key = { id: 3 } // 重写键
console.log(key) // { id: 3 }
console.log(m9.get(key)) // undefined，映射内部的引用无法修改
}
console.log(m9) // Map(1) { { id: 2 } => 'val2' }，映射不受影响选择 Object 还是 Map
- 固定大小的内存，Map 约比 Object 多存储 50%的键值对
- 涉及大量插入操作，Map 性能更佳
- 涉及大量查找操作，Object 更适合
- 涉及大量删除操作，毫无疑问选择 Map
总结 & 问点
| 有序 | 键 | |
|---|---|---|
| Object | 否 | 数值、字符串、符号 |
| Map | 是 | 任何 JS 数据类型 |
- Map 属于什么类型？如何创建 Map 类型？初始化后可以对其进行哪些操作？
- Map 可以使用哪些数据类型作为键？若键或值是对象，当其内容或属性被修改时，映射受到影响么？
- Map 和 Object 有哪些区别？
- 如何将 Map 转换为数组？如何获取 Map 的每一个键值对？单独的键或值呢？
- 可以在 Map 遍历时修改内部的键或值么？修改后会对 Map 产生影响么？