带你玩转 JavaScript ES6 (六) - Map 映射

acrazing 发布于2019-08-22 14:02 / 2263人阅读

摘要：初始化申明一个设置和获取值使用设置新值或更新值申明设置值张三丰张三丰重复设置值如果键值存在则新值替换旧值张三丰使用获取值，如果获取的不存在返回分别获取判断是否存在使用判断给定是否存在映射内。

</>复制代码 
本文同步带你入门 带你玩转 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

参考资料

MDN Map

GPU云服务器云服务器教你玩转html5 javascript实现map 带你学c带你飞你玩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92791.html

带你玩转 JavaScript ES6 (七) - 异步

摘要：说明处理方法被异步执行了。意味着操作成功完成。状态的对象可能触发状态并传递一个值给相应的状态处理方法，也可能触发失败状态并传递失败信息。注生命周期相关内容引用自四使用和异步加载图片这是官方给出的示例，部分的代码如下带你玩转 JavaScript ES6 (七) - 异步本文同步带你玩转 JavaScript ES6 (七) - 异步，转载请注明出处。本章我们将学习 ES6 中的 ...

he_xd 2019-08-26 11:38 评论0 收藏0
【深入浅出容器云】五分钟带你玩转Docker容器服务

摘要：深入浅出容器云系列文章是由时速云出品，本文是第二篇，欢迎大家不吝赐教。容器服务是一种高度可扩展的高性能容器管理服务，服务于应用的完整生命周期。存储卷容器服务支持有状态和无状态服务。当容器重新部署时也会随着容器在不同主机之间迁移。导语：随着以Docker为代表的容器技术在国内的迅速发展，容器云也逐渐被广大开发者所熟知，但容器云（CaaS）相比传统的云主机（IaaS）在实际应用中还存在着...

AlexTuan 2019-06-28 15:07 评论0 收藏0
带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

Panda 2019-08-29 11:03 评论0 收藏0
带你玩转css3的3D！

摘要：透视即是以现实的视角来看屏幕上的事物，从而展现的效果。旋转则不再是平面上的旋转，而是三维坐标系的旋转，就包括轴，轴，轴旋转。必须与属性一同使用，而且只影响转换元素。可自由转载引用，但需署名作者且注明文章出处。 showImg(https://segmentfault.com/img/bVzJoZ); 话不多说，先上demo 酷炫css3走马灯/正方体动画： https://bupt-...

archieyang 2019-08-01 15:32 评论0 收藏0
带你玩转Postman的集合

摘要：选择选项，可以添加名称和描述的数据，以便其他用户了解你的相关信息，如图创建一个新集合。如果用户正在处理一些特定的集合，可以单击图标将集合置顶，如图过滤集合。集合...

Bowman_han 2021-11-22 09:34 评论0 收藏0