你玩转 JavaScript ES6 (六) – Map 映射

本章我们讲学习 ES6 中的 Map(映射)。上一章节我们学习了 [Set(集合)]()的相关内容,如果说 Set 类似于数组,那么 Map 就类似于对象。

一、 概念

Map 是一个可以存储键值对的对象。其中键和值都可以是对象、原始值或二者的结合。

先看一个简单的示例,来了解 Map 基本用法:

// 申明 map 实例
let departments = new Map()

// 向 map 中添加元素
departments.set("UX", {
    'name': 'UX Center',
    'employees': 48
})

departments.set('dev', {
    'name': 'Research & Development Center',
    'employees': 200    
})

console.log(departments)// Map {"UX" => Object {name: "UX Center", employees: 48}, "dev" => Object {name: "Research & Development Center", employees: 200}}

console.log(typeof departments)// object

本质上 Map(映射) 就是一个 object(对象),在 ES6 以前,我们通常会使用 object 模拟出类似 Map 的数据结构。

二、 Map 映射常用操作

常用的 Map 操作有:set(key, value) 修改, get(key) 获取, delete(key) 删除, has(key) 判断是否存在, values() 获取所有值和 clear() 清空 Map 等。

2.1 初始化

// 申明一个 Map
let m = new Map()
console.log(m)

2.2 设置和获取值

① 使用 map.set(key, value) 设置新值或更新值

// 申明 Map
let students = new Map();

// 设置值
students.set('huliuqing', {
    name: 'huliuqing',
    age: 18
})

students.set('zhangsanfeng', {
    name: '张三丰',
    age: 128
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 18}, "zhangsanfeng" => Object {name: "张三丰", age: 128}}

// 重复设置值, 如果键值存在则新值替换旧值
students.set('huliuqing', {
    name: 'huliuqing',
    age: 16
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 16}, "zhangsanfeng" => Object {name: "张三丰", age: 128}}

② 使用 get(key) 获取值,如果获取的 key->value 不存在返回 undefined

let students = new Map();

students.set('huliuqing', {
    name: 'huliuqing',
    age: 18
})

// 分别获取 huliuqing ,zhangsanfeng
console.log(students.get('huliuqing'))// {name: "huliuqing", age: 18}
console.log(students.get('zhangsanfeng'))// undefined

2.3 判断是否存在

使用 map.has(key) 判断给定 key 是否存在 Map(映射) 内。

let students = new Map();

students.set('huliuqing', {
    name: 'huliuqing',
    age: 18
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 18}}

console.log(students.has('huliuqing'))// true
console.log(students.has('zhangsanfeng'))// false

2.4 删除

方法 map.delete(key) 删除给定 key 的键值对,并返回成功或失败结果。

成功返回 true; 失败或key不存在返回 false。

let students = new Map();

students.set('huliuqing', {
    name: 'huliuqing',
    age: 18
})
console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 

// 删除
let deleted = students.delete('zhangsanfeng')
console.log(`deleted zhangshanfeng: ${deleted}`)
console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 

deleted = students.delete('huliuqing')
console.log(`deleted huliuqing: ${deleted}`)
console.log(students)// Map {} 

2.5 清空映射

使用 map.clear() 清空 Map 映射内所有元素

let students = new Map();

students.set('huliuqing', {
    name: 'huliuqing',
    age: 18
})

students.set('zhangsanfeng', {
    name: '张三丰',
    age: 128
})

console.log(students)// Map {"huliuqing" => Object {name: "huliuqing", age: 18}, "zhangsanfeng" => Object {name: "张三丰", age: 128}}

// 清空
students.clear();
console.log(students);// Map {}

2.6 获取 Map 中元素个数

使用 map.size 可以获取当前 Map 中有多少个元素

三、 Map(映射) 的遍历

由于 Map 同 Set 一样,是一个可迭代对象,所以可以使用 for of 迭代语法 对其迭代获取所有值

let pets = new Map()

pets.set('cat', {
     name: 'lily' ,
     age: 2
})

pets.set('dog', {
    name: 'cat',
    age: 1
})

for (pet of pets) {
    console.log(pet)// ["cat", Object]; ["dog", Object]
}

for (let [name, pet] of pets) {
    console.log(`${name} : ${pet}`)//cat : [object Object]; dog : [object Object]
}

四、 Object 与 Map 异同

由于 Map 本质是 Object 对象,虽然以前我们也拿 Object 当 Map 来使用,但是相比 Object 对象,Map 有一下特点:

4.1 object 与 map 异同

  • object 通常有原型即对象实例有 prototype 属性,Map 无 prototype 属性。虽然 ES5 开始可以使用 map = Object.create(null) 创建无 prototype 的对象。
  • Map 的键名可以是对象、原始值或二者的结合,而对象的属性只能是 string 或 symbols 类型(Symbol 类型为 ES6 新的基础数据类型)。
  • Map 使用 size 属性可以非常用以获取键值对个数。而对象仅能手动确认。

4.2 如何选择 Map 或 Object

如果你需要解决下面这些问题,那么果断拥抱 Map。

- 在运行之前 key 是否是未知的,是否需要动态地查询 key 呢?
- 是否所有的值都是统一类型,这些值可以互换么?
- 是否需要不是字符串类型的 key ?
- 键值对经常增加或者删除么?
- 是否有任意个且非常容易改变的键值对?
- 这个集合可以遍历么(Is the collection iterated)?

五、 WeakMap

WeakMap 解构同 Map 结构类似,不同点在于 WeakMap 键名仅支持对象和null

参考资料

MDN Map

关于 “你玩转 JavaScript ES6 (六) – Map 映射” 的 2 个意见

发表评论

电子邮件地址不会被公开。 必填项已用*标注