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