《javascript高级程序设计》学习笔记 | 6.4.Map
发布于 3 年前 作者 simon9124 1473 次浏览 来自 分享

关注前端小讴，阅读更多原创技术文章

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) // 0
  • set()方法返回映射实例，因此可以把多个操作连缀起来，从初始化到添加键/值对：
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 产生影响么？
回到顶部