博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
带你玩转 JavaScript ES6 (六) - Map 映射
阅读量:6721 次
发布时间:2019-06-25

本文共 3899 字,大约阅读时间需要 12 分钟。

本文同步带你入门 ,转载请注明出处。

本章我们讲学习 。上一章节我们学习了 [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

参考资料

你可能感兴趣的文章
微信登陆,支付防坑指南
查看>>
如何给PDF删除空白页面?来看看这种方法
查看>>
Java学习(一)
查看>>
Centos7快速安装haproxy
查看>>
SQL Server 获取最后一天(指定时间的月最后一天日期)
查看>>
SilverLight扩展控件RadTreeView
查看>>
登录注册接口中的忘记密码重置密码后为什么要设置token问题
查看>>
字符串删除一个字符
查看>>
hdu6097 Mindis(几何)
查看>>
求二叉树的叶子节点数目
查看>>
[转] js实现对图片的二进制流md5计算
查看>>
Oracle 序列(自增ID)
查看>>
这应该是你们想要的 DOS 命令
查看>>
浅谈ES6中的扩展运算符 (三个点...)
查看>>
iOS WKWebView添加Cookie
查看>>
swift4.2 - 距离传感器
查看>>
监听手机横屏竖屏
查看>>
深拷贝和浅拷贝区别及概念
查看>>
【BZOJ】1086: [SCOI2005]王室联邦
查看>>
更新cocoapods 时遇到问题及解决
查看>>