本文同步带你入门 ,转载请注明出处。
本章我们讲学习 。上一章节我们学习了 [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 初始化
// 申明一个 Maplet m = new Map()console.log(m)
2.2 设置和获取值
① 使用 map.set(key, value) 设置新值或更新值
// 申明 Maplet 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 ,zhangsanfengconsole.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'))// trueconsole.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