好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

ES6+ Map

ES6+ Map

1. 前言

前面两节我们学习了 Set 的相关 内容 ,本节我们开始学习 Map 数据结构的 内容 。Map 对象和原生的 Object 类似都是存储数据的,而且也推荐使用 Map 的方式来存储数据。

在 ES5 中使用 Object 来存储对象,然而这种存储存在一些问题,比如说 Object 中的键是无序的, Object 的键只能是字符串类型等等。ES6 提供了 Map 数据结构,保存的是键值对,而且能够记住键的插入顺序,并且任何值 (对象或者原始值) 都可以作为 一个 键或 一个 值,这样极大地扩展了数据存储的场景。

2. Map 使用详情

2.1 Map 基本说明

在前面的 数据结构扩展 一节我们已经了解到 Map 的基本使用。和 Set 一样, Map 也是 一个 构造 函数 ,不能直接使用,需要通过 new 的方式来创建 一个 Map 实例。

  var  map  =   Map  (  [ i tera ble ]  )  ; 
 

Map 对象在插入数据时是按照顺序来插入的,也就是说在插入时会保持插入的位置, Object 的在插入数据时没有顺序概念。 Map 对象可以被 for...of 循环,在每次迭代后会返回 一个 形式为 [key,value] 的数组,这个我们在下面的例子中会说到。

Map 的本质其实还是 一个 对象,并且它也是继承 Object 的,看下面的实例:

  var  map  =   new   Map  (  [  [  "x"  ,   ]  ,   [  "y"  ,   ]  ]  )  ; 
console .  log  ( map  instanceof   Object  )  ;     //true 
 

从上面的 代码 中可以看出 Object 在实例 map 的原型链上。

在创建 Map 实例时可以接收 一个 数组或是 一个 可遍历的对象作为参数,这个参数内的每一项是键值的组合 [key, value] 第 一个 值时键,第二个值时键的值。

在初始化 Map 对象时,如果 默 认参数的数组中超过两个以上的值不会被 Map 对象读取。

  var  map  =   new   Map  (  [  [  "x"  ,   ,   'a'  ,   'b'  ]  ,   [  "y"  ,   ,   'c'  ]  ,   [  "z"  ,   ,   'd'  ]  ]  )  ; 
console .  log  ( map )    // Map(3) {"x" => 1, "y" => 2, "z" => 3} 
 

上面的 代码 中,从打印的结果可以看出,数组中超过的元素都会被 自动 忽略。

2.2 Map 的 属性 和 方法

Map 提供的 属性 和 方法 从增、删、改、查几个方面入手,主要有以下 5 种:

方法 名 描述 set 接收键值对,向 Map 实例中 添加 元素 get 传入指定的 key 获取 Map 实例上的值 delete 传入指定的 key 删除 Map 实例中对应的值 clear 清空 Map 实例 has 传入指定的 key 查找在 Map 实例中是否存在 size 属性 ,返回 Map 实例的长度

查看更多关于ES6+ Map的详细内容...

  阅读:37次

上一篇

下一篇

第1节:ES6+ 简介    第2节:ES6 环境配置    第3节:ES6+ let    第4节:ES6+ const    第5节:ES6+ 展开语法    第6节:ES6+ 剩余参数    第7节:ES6+ 解构赋值    第8节:ES6+ 模版字符串    第9节:ES6+ 箭头函数    第10节:ES6+ 数值扩展    第11节:ES6+ isFinite()&isNaN()    第12节:ES6+ Number 对象的方法    第13节:ES6+ Math 对象的扩展    第14节:ES6+ includes()    第15节:ES6+ 字符串的扩展    第16节:ES6+ startsWith()    第17节:ES6+ endsWith()    第18节:ES6+ repeat()    第19节:ES6+ padStart()    第20节:ES6+ padEnd()    第21节:ES6+ trim()    第22节:ES6+ Array.from()    第23节:ES6+ of()    第24节:ES6+ find()和findIndex()    第25节:ES6+ copyWithin()    第26节:ES6+ fill()    第27节:ES6+ isArray()    第28节:ES6+ 对象的扩展    第29节:ES6+ flat()    第30节:ES6+ 可选链操作符    第31节:ES6+ Object.is()    第32节:ES6+ Object.assign()    第33节:ES6+ Object.keys()    第34节:ES6+ Object.values()    第35节:ES6+ Object.entries()    第36节:ES6+ 数据结构扩展    第37节:ES6+ Set    第38节:ES6+ WeakSet    第39节:ES6+ Map    第40节:ES6+ WeakMap    第41节:ES6+ Symbol    第42节:ES6+ for...of    第43节:ES6+ 迭代协议    第44节:ES6+ 实现一个简版的 Promise    第45节:ES6+ Promise 基础    第46节:ES6+ Promise 进阶    第47节:ES6+ Generator 基础    第48节:ES6+ Generator 函数应用    第49节:ES6+ async/await    第50节:ES6+ Class 前置知识    第51节:ES6+ Class    第52节:ES6+ Proxy    第53节:ES6+ Reflect(一)    第54节:ES6+ Reflect(二)    第55节:ES6+ 模块化(一)    第56节:ES6+ 模块化(二)    第57节:ES6实战1-实现Vue3 reactive 源码    第58节:ES6实战2-实现 Vue3 effect 源码    第59节:ES6 实战2-封装请求    第60节:ES6+ 实战3-代码整洁之道    第61节:ES6 Map原理分析    第62节:ES6module语法加载importexport    第63节:ES6的循环与可迭代对象示例详解