本文同步带你入门
带你玩转 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