ES6 Map数据结构
Map
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
const m = new Map();
const o = {p:"hello world"};
m.set(o,'content');
console.log(m.get(o)); // contentconsole.log(m.has(o)); // true
console.log(m.delete(o)); // true
console.log(m.has(o)); // false
上面代码使用 Map 结构的set方法,将对象o当作m的一个键,然后又使用get方法读取这个键,接着使用delete方法删除了这个键。
上面的例子展示了如何向 Map 添加成员。作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
const map = new Map([['name','张三']]);console.log(map.size); // 1
console.log(map.has('name')); // true
console.log(map.get('name')); // 张三
Map构造函数接受数组作为参数,实际上执行的是下面的算法。
const items = [['name', '张三'],['title', 'Author']
];const map = new Map();items.forEach(([key, value]) => map.set(key, value)
);
如果对同一个键多次赋值,后面的值将覆盖前面的值。
const map = new Map();map
.set(1, 'aaa')
.set(1, 'bbb');console.log(map.get(1)); // "bbb"
上面代码对键1连续赋值两次,后一次的值覆盖前一次的值。
如果读取一个未知的键,则返回undefined。
如果 Map 的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map 将其视为一个键,比如0和-0就是一个键,布尔值true和字符串true则是两个不同的键。另外,undefined和null也是两个不同的键。虽然NaN不严格相等于自身,但 Map 将其视为同一个键。
let map = new Map();map.set(-0, 123);
console.log(map.get(+0)) // 123map.set(true, 1);
map.set('true', 2);
console.log(map.get(true)) // 1map.set(undefined, 3);
map.set(null, 4);
console.log(map.get(undefined)) // 3map.set(NaN, 123);
console.log(map.get(NaN)) // 123
实例的属性和操作方法
Map 结构的实例有以下属性和操作方法。
(1)size 属性
size
属性返回 Map 结构的成员总数。
const map = new Map();
map.set('foo', true);
map.set('bar', false);map.size // 2
(2)set(key, value)
set
方法设置键名key
对应的键值为value
,然后返回整个 Map 结构。如果key
已经有值,则键值会被更新,否则就新生成该键。
const m = new Map();m.set('edition', 6) // 键是字符串
m.set(262, 'standard') // 键是数值
m.set(undefined, 'nah') // 键是 undefined
set
方法返回的是当前的Map
对象,因此可以采用链式写法。
let map = new Map().set(1, 'a').set(2, 'b').set(3, 'c');
(3)get(key)
get
方法读取key
对应的键值,如果找不到key
,返回undefined
。
const m = new Map();const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数m.get(hello) // Hello ES6!
(4)has(key)
has
方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
const m = new Map();m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
(5)delete(key)
delete
方法删除某个键,返回true
。如果删除失败,返回false
。
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // truem.delete(undefined)
m.has(undefined) // false
(6)clear()
clear
方法清除所有成员,没有返回值。
let map = new Map();
map.set('foo', true);
map.set('bar', false);map.size // 2
map.clear()
map.size // 0
遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。
keys()
:返回键名的遍历器。values()
:返回键值的遍历器。entries()
:返回所有成员的遍历器。forEach()
:遍历 Map 的所有成员。
const map = new Map([['F', 'no'],['T', 'yes'],]);for (let key of map.keys()) {console.log(key);}// "F"// "T"for (let value of map.values()) {console.log(value);}// "no"// "yes"for (let item of map.entries()) {console.log(item[0], item[1]);}// "F" "no"// "T" "yes"// 或者for (let [key, value] of map.entries()) {console.log(key, value);}// "F" "no"// "T" "yes"// 等同于使用map.entries()for (let [key, value] of map) {console.log(key, value);}// "F" "no"// "T" "yes"
Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...
)。
const map = new Map([[1, 'one'],[2, 'two'],[3, 'three'],
]);[...map.keys()]
// [1, 2, 3][...map.values()]
// ['one', 'two', 'three'][...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']][...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
转载于:https://www.cnblogs.com/jiqing9006/p/9356953.html
ES6 Map数据结构相关推荐
- 【ES6】JS的Set和Map数据结构
[ES6]JS的Set和Map数据结构 一.Set 1.基本用法 2.4种操作方法 3.4种遍历方法 4.Set的应用 1)Set转化为数组 2)去除数组的重复元素 3)实现并集(Union).交集( ...
- ES6之路第九篇:Set和Map数据结构
set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 1 const s = new S ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
- ES6中 Map 数据结构
ES6新增了 Map数据结构,Map对象保存键值对,任何值(原始值或对象)都可以作为一个键或一个值. 基本用法 let map = new Map(); let obj = {name: 'Leon' ...
- ES6学习(七)—Set 和 Map 数据结构
ES6学习(七)-Set 和 Map 数据结构 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程 一.ES6 提供了新的数据结构 Set.它类似于数组,但是成员 ...
- ES6 (十三)Set 和 Map 数据结构、WeakSet 和 WeakMap、WeakRef、FinalizationRegistry
ES6 (十三)Set 和 Map 数据结构.WeakSet 和 WeakMap.WeakRef.FinalizationRegistry 文章目录 ES6 (十三)Set 和 Map 数据结构.We ...
- Set 和 Map 数据结构
1.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); ...
- “睡服”面试官系列第七篇之map数据结构(建议收藏学习)
目录 1map 1.1含义和基本用法 1.2实例的属性和操作方法 1.2.1size属性 1.2.2set(key, value) 1.2.3get(key) 1.2.4has(key) 1.2.5d ...
- es6之数据结构 set,WeakSet,mapWeakMap
{let list = new Set();list.add(1);list.add(2);list.add(1);console.log(list); //Set(2) {1, 2} let arr ...
最新文章
- BS-GX-018 基于SSM实现在校学生考试系统
- python 对字典排序
- 窗口迅速关闭的解决办法/scanf/if/for/break
- 从工作的角度看 CV/NLP/推荐系统选哪个?
- MATLAB中求矩阵非零元的坐标
- mysql冷热备_Mysql的冷备热备(数据备份)
- 一起学习C语言:数组(三)
- 转自云界漫步:同步容灾100公里的限制来自哪里
- property java用法_Java Properties getProperty(key)用法及代码示例
- 【白皮书分享】低幼年龄段在线教育白皮书.pdf(附下载链接)
- springMvc配置文件
- Week 2 代码审查
- Java集合中List,Set以及Map等集合体系详解(史上最全)
- International Obfuscated C Code Contest(IOCCC)
- MATLAB常用正则表达式记录
- psp3000 java_psp上的python
- python的多元数据类型(上)
- rest_framework学习之解析器(Parsers)
- 计算机c盘中用户文件夹内的文件改名,Win10-更改c盘下的用户文件夹名
- VBA将excel中的多个工作表sheet合成一个工作表,多个工作簿的多个工作表合并为一个工作簿
热门文章
- oracle 唯一递增列,在oracle中创建unique唯一约束(单列和多列)
- python个人博客源码_我的使用Sanic的个人博客源码开源了!
- 24小时轮播怎么实现的_轮播的实现方式
- python time智能等待_python中等待怎么表示
- @Data 注解对类静态字段, 无效
- 轨道阱 matlab,赛默飞四极杆-轨道阱液质联用仪核心参数详解
- matlab2011实验3,matlab实验3探索.doc
- python函数概述_Python概述
- python 提取最小外接矩形_放弃机器学习框架,如何用 Python 做物体检测?
- 不同的二叉搜索树-战胜100%的Java用户