深入理解ES6之—set与map
Set是无重复值的有序列表。Set会自动移除重复的值,因此你可以使用它来过滤数组中重复的值并返回结果。
Map是有序的键值对,其中的键允许是任何类型。
Set和Map是es6新增的两个数据集合。
Set集合
es6新增了set类型,这是一种无重复值的有序列表。Set允许对它包含的数据进行快速访问。
创建Set并添加项目
Set通过new Set()来创建,调用add()方法就可以向Set中添加项目。检查size属性还能查看其中包含多少项。
let set = new Set();
set.add(5);
set.add("5");
console.log(set.size);//2
Set不会使用强制类型转换来判断值是否重复。还可以向Set添加多个对象,他们不会被合并为同一项。
let set = new Set();
let key1 = {};
let key2 = {};
set.add(key1);
set.add(key2);
console.log(set.size);//2
如果add()方法用相同的值进行了多次调用,那么在第一次之后的调用实际上会被忽略。
let set = new Set();
set.add(5);
set.add("5");
set.add(5);//被忽略
console.log(set.size);//2
你可以使用数组来初始化一个Set,并且Set构造器确保不会重复使用这些值。
let set = new Set([1,2,3,4,5,2,6,5,5,5]);
console.log(set.size);//6
虽然数值5在数组中出现了四次,但是Set中只有一个5
你可以使用has()方法来测试某个值是否存在于set中
let set = new Set();
let key1 = {};
let key2 = {};
let key3 = {};
set.add(key1);
set.add(key2);
console.log(set.has(key1));//true
console.log(set.has(key3));//false
移除值
使用delete()方法来移除单个值或者调用clear()方法将所有值从Set中移除。
let set = new Set([1, 2, 3, 4, 5, 2, 6, 5, 5, "5"]);
console.log(set);
set.delete(5);
console.log(set.has(5));//false
set.clear();
console.log(set.size);//0
Set 上的forEach()方法
forEach()方法还会被传递一个回调函数,该回调函数接收三个参数:
- Set中下个位置的值
- 与第一个参数相同的值
- 目标Set本身
由于Set没有键,为了使forEach方法与数组和map的forEach方法一致:将Set中的每一项同时认定为键与值。
let set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet) {
console.log(`${key} ${value}`)
console.log(ownerSet === set);
})
将Set转换为数组
let arr = [1,2,4,3,2,5,5];
let set = new Set(arr);
let arr1 = [...set];
console.log(arr1);
Map集合
ES6的Map类型是键值对的有序列表,而键和值都可以是任意类型。键的比较使用的是Object.is(),因此你可以将5与“5”同时作为键,因为他们类型不同。
可以调用set方法并传递一个键与一个关联的值,来给Map添加项;此后使用键名来调用get()方法便能提取对应的值。
let map = new Map();
map.set("name", "cc");
map.set("age", 23);
console.log(map.get("name"));//cc
console.log(map.get("age"));//23
也可以使用对象作为键
let map = new Map();
let key1 = {};
let key2 = {};
map.set(key1, 5);
map.set(key2, 8);
console.log(map.get(key1));//5
console.log(map.get(key2));//8
Map的方法和属性
- has(key)
- delete(key)
- clear()
- size
Map的初始化
你能将数组传递给Map构造器,以便使用数据来初始化一个Map。该数组中的每一项也必须是数组,内部数组的首个项会作为键,第二项则为对应值。因此整个Map就被这些双项数组填充。
let map = new Map([
["name", "cc"],
["age", 26]
]);
console.log(map.has("name"));//true
console.log(map.get("name"));//cc
console.log(map.has("age"));//true
console.log(map.get("age"));//26
console.log(map.size);//2
Map上的forEach()方法
let map = new Map([
["name", "cc"],
["age", 26]
]);
map.forEach(function(value, key, source) {
console.log(`${key}的值是${value}`);
console.log(source === map);
})
深入理解ES6之—set与map的更多相关文章
- 理解Golang哈希表Map的元素
目录 概述 哈希函数 冲突解决 初始化 结构体 字面量 运行时 操作 访问 写入 扩容 删除 总结 在上一节中我们介绍了 数组和切片的实现原理,这一节会介绍 Golang 中的另一个集合元素 - 哈希 ...
- 理解 ES6 Generator-next()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端笔记之React(六)ES6的Set和Map&immutable和Ramda和lodash&redux-thunk
一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 E ...
- 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理
理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...
- 【读书笔记】【深入理解ES6】#7-Set集合和Map集合
ES6新标准中将Set集合和Map集合添加到JS中. ES5中Set集合和Map集合 在ES5中,开发者们用对象属性来模拟这两种集合. var set = Object.create(null); s ...
- ES6之Set与Map加深理解
Set 类似于数组,但是成员的值都是唯一的,没有重复的值,有序. Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化. 用途 数组去重: [...new ...
- 深入理解es6(下)
一.symbol javascript基本数据类型: null.undefined.number.boolean.string.symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无 ...
- 深入理解ES6(二)(解构赋值)
变量的解构赋值 (1) 数组的解构赋值 1.基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring ). 只要等号两边的模式相同,左边的变量 ...
- es6之set和map
1.set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值,set本身就是构造函数,所以可以通过new的方式来创建对象 // 例一 可以做数组去重用 var set ...
随机推荐
- Uva 3708 Graveyard
题意:在周长为10000的圆上等距分布着n个雕塑.现在又有m个新雕塑加入(位置可以随意放),希望所有n+m个雕塑在圆周上均匀分布. 这就需要移动其中一些原有的雕塑.要求n个雕塑移动的距离最小. (2& ...
- Python面试题之生成器/迭代器
1.为什么要有生成器? 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个 ...
- ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL&EF
本章将介绍如何通过Entity Framework来使用My SQL,之前介绍EF时介绍了provider这个配置项,而且也介绍了在ASP.NET访问MySQL数据仍然是通过ADO.NET,不同的地方 ...
- 2017值得一瞥的JavaScript相关技术趋势
2017值得一瞥的JavaScript相关技术趋势从属于笔者的Web 前端入门与工程实践,推荐阅读2016-我的前端之路:工具化与工程化获得更多关于2016年前端总结.本文主要内容翻译自,笔者对于每个 ...
- Ubuntu配置OpenStack 一:主机环境配置以及问题总结
本文包含openstack配置的实验环境的基本步骤.在下面的步骤中将逐步讲解如何操作. 1.准备三台虚拟机 主机名字分别命名为controller.network.computer[desktop版或 ...
- Anroid四大组件service之本地服务
服务是Android四大组件之一,与Activity一样,代表可执行程序.但Service不像Activity有可操作的用户界面,它是一直在后台运行.用通俗易懂点的话来说: 如果某个应用要在运行时向用 ...
- Linux下PHP连接MS SQLServer的办法
Linux下PHP连接MS SQLServer的办法分析问题 本来PHP脚本读写SQLServer是没有什么问题的,在Apache for windows和Windows IIS下可以工作的很好,一般 ...
- java的windows自动化-自动运行java程序
那么在一些工具齐全并且已经有了一定的写好的java程序的情况下(环境变量和软件见上一章http://www.cnblogs.com/xuezhezlr/p/7718273.html),如何自动化运行j ...
- Android+ESP8266+路由器实现远程控制(基于花生壳域名方式访问)
x先说一下实现的功能,其实就是远程控制 和这篇文章的控制 http://www.cnblogs.com/yangfengwu/p/5295632.html 应该说是这篇文章的升级,解决这篇文章由 ...
- QQ顶部的消息,联系人切换
高仿ios SegmentView 以前做过的一个项目美工设计的页面包含这个控件,和QQ消息页面顶部的效果一样,其实,这个控件是ios7的分段控制,android没有这个控件,不过实现起来也比较简单, ...