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数据结构相关推荐

  1. 【ES6】JS的Set和Map数据结构

    [ES6]JS的Set和Map数据结构 一.Set 1.基本用法 2.4种操作方法 3.4种遍历方法 4.Set的应用 1)Set转化为数组 2)去除数组的重复元素 3)实现并集(Union).交集( ...

  2. ES6之路第九篇:Set和Map数据结构

    set 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 1 const s = new S ...

  3. es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构

    往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...

  4. ES6中 Map 数据结构

    ES6新增了 Map数据结构,Map对象保存键值对,任何值(原始值或对象)都可以作为一个键或一个值. 基本用法 let map = new Map(); let obj = {name: 'Leon' ...

  5. ES6学习(七)—Set 和 Map 数据结构

    ES6学习(七)-Set 和 Map 数据结构 挑重点 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程 一.ES6 提供了新的数据结构 Set.它类似于数组,但是成员 ...

  6. ES6 (十三)Set 和 Map 数据结构、WeakSet 和 WeakMap、WeakRef、FinalizationRegistry

    ES6 (十三)Set 和 Map 数据结构.WeakSet 和 WeakMap.WeakRef.FinalizationRegistry 文章目录 ES6 (十三)Set 和 Map 数据结构.We ...

  7. Set 和 Map 数据结构

    1.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); ...

  8. “睡服”面试官系列第七篇之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 ...

  9. 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 ...

最新文章

  1. BS-GX-018 基于SSM实现在校学生考试系统
  2. python 对字典排序
  3. 窗口迅速关闭的解决办法/scanf/if/for/break
  4. 从工作的角度看 CV/NLP/推荐系统选哪个?
  5. MATLAB中求矩阵非零元的坐标
  6. mysql冷热备_Mysql的冷备热备(数据备份)
  7. 一起学习C语言:数组(三)
  8. 转自云界漫步:同步容灾100公里的限制来自哪里
  9. property java用法_Java Properties getProperty(key)用法及代码示例
  10. 【白皮书分享】低幼年龄段在线教育白皮书.pdf(附下载链接)
  11. springMvc配置文件
  12. Week 2 代码审查
  13. Java集合中List,Set以及Map等集合体系详解(史上最全)
  14. International Obfuscated C Code Contest(IOCCC)
  15. MATLAB常用正则表达式记录
  16. psp3000 java_psp上的python
  17. python的多元数据类型(上)
  18. rest_framework学习之解析器(Parsers)
  19. 计算机c盘中用户文件夹内的文件改名,Win10-更改c盘下的用户文件夹名
  20. VBA将excel中的多个工作表sheet合成一个工作表,多个工作簿的多个工作表合并为一个工作簿

热门文章

  1. oracle 唯一递增列,在oracle中创建unique唯一约束(单列和多列)
  2. python个人博客源码_我的使用Sanic的个人博客源码开源了!
  3. 24小时轮播怎么实现的_轮播的实现方式
  4. python time智能等待_python中等待怎么表示
  5. @Data 注解对类静态字段, 无效
  6. 轨道阱 matlab,赛默飞四极杆-轨道阱液质联用仪核心参数详解
  7. matlab2011实验3,matlab实验3探索.doc
  8. python函数概述_Python概述
  9. python 提取最小外接矩形_放弃机器学习框架,如何用 Python 做物体检测?
  10. 不同的二叉搜索树-战胜100%的Java用户