本文同步带你入门
带你玩转 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'))// undefined2.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'))// false2.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
