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

柳公子

发布于 2018-09-17 16:48:26

2.3K0

发布于 2018-09-17 16:48:26

文章被收录于专栏：PhpZendo

本章我们讲学习 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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018年1月26日，如有侵权请联系 cloudcommunity@tencent.com 删除

java

存储

数据结构

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

java

存储

数据结构

登录后参与评论

0 条评论

热度