es6之set和map
1.set
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值,set本身就是构造函数,所以可以通过new的方式来创建对象
// 例一 可以做数组去重用
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
那么set内部是怎么判断两个数据相不相等呢?使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),所以 5 和 '5'是不同的,它和(===)唯一的不同就是它认为NaN是同一个值,是相等的。
Array.from方法可以将Set结构转为数组。这里就刚好提供了数组的去重方法
function dedupe(array) {
return Array.from(new Set(array)); //将set结构转化为数组
}
dedupe([1, 1, 2, 3]) // [1, 2, 3] 传入数组返回一个去重的数组
set的属性和方法
- Set.prototype.constructor:构造函数,默认就是set函数
- Set.prototype.size:返回成员总数
- add(value):添加值,返回Set对象本身
- delete(value):删除值,返回布尔值,是否删除成功
- has(value):是否存在某个值,返回布尔值
- clear():清空所有成员
- keys():返回键名
- values():返回键
- entires():返回键值对
- forEach():使用回调函数遍历每个成员
//操作数据类方法
s.add(1).add(2).add(2);
// 注意2被加入了两次 s.size // s.has(1) // true
s.has(2) // true
s.has(3) // false s.delete(2);
s.has(2) // false
操作数据类方法
//遍历方法
let set = new Set(['red', 'green', 'blue']); for (let item of set.keys()) {
console.log(item);// red green blue
} for (let item of set.values()) {
console.log(item);// red green blue
} for (let item of set.entries()) {
console.log(item);// ["red", "red"] ["green", "green"] ["blue", "blue"]
} let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )// 2 4 6
遍历方法
set应用
//扩展运算符(...)内部使用for...of循环,就可以去除数组的重复成员。
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]应用1,数组去重
//map和filter也可以用于set中了 let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6} let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}应用2,set和map、filter
//因此使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。 let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]); // 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4} // 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3} // 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}应用3,实现交、并、差集
2.map
ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键
对象作为参数
var map = new Map();
map.set({p}, 555);
map.get({p}) // undefined
//虽然都是{p},但是map储存的是地址,他们代表的是两个不同对象
数组作为参数
var m = new Map([
[true, 'foo'],
['true', 'bar']
]); m.get(true) // 'foo'
m.get('true') // 'bar'
//这里的两个键的类型不同哦,所以得到的值也会不同
同一个键多次赋值将会覆盖
let map = new Map(); map
.set(1, 'aaa')
.set(1, 'bbb'); map.get(1) // "bbb"
//后面的赋值会覆盖前面的赋值
未知键的值返回undefined
new Map().get('asfddfsasadf')
其他 NaN -0和+0,在map里将视为是同一值
map的属性和方法
size属性返回Map结构的成员总数。- set(key, value ) 设置key所对应的键值,如果已经有键值那么就会更新
- get(key) 获取key所对应的键值,找不到就会返回undefined
- has(key) 是否存在这个键,返回布尔值
- delete(key) 删除这个键,返回true则成功,false则不成功
- clear() 清除所有成员方法
遍历方法
keys():返回键名的遍历器。values():返回键值的遍历器。entries():返回所有成员的遍历器。forEach():遍历Map的所有成员。
注:需要特别注意的是,Map的遍历顺序就是插入顺序。
es6之set和map的更多相关文章
- 前端笔记之React(六)ES6的Set和Map&immutable和Ramda和lodash&redux-thunk
一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 E ...
- 深入理解ES6之—set与map
Set是无重复值的有序列表.Set会自动移除重复的值,因此你可以使用它来过滤数组中重复的值并返回结果. Map是有序的键值对,其中的键允许是任何类型. Set和Map是es6新增的两个数据集合. Se ...
- ES6新增的数据类型Map和Set。
Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
- ES6中Set 和 Map用法
JS中Set与Map用法 一.Set 1.基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. ...
- es6入门set和map
ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var set = new Set([1, ...
- ES6,新增数据结构Map的用法
Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成 ...
- ES6学习笔记之map、set与数组、对象的对比
ES6 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一 ...
- ES6系列_12之map数据结构
1.map数据结构出现的原因? JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制.为了能实现将对象作为键 ...
- es6的Set和Map数据结构
Set 和 Map 数据结构 Set WeakSet Map WeakMap Set § ⇧ 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set ...
随机推荐
- js处理url参数
var UrlArgent = { Parsed: false, //是否已解析 Cache: {}, //缓存值 ParseArg: function () { // 解析地址栏的参数值 UrlAr ...
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
- matlab clear
clear 删除工作空间中的项目,释放系统内存 语法: clear clear name clear name1 name2 name3... clear global name clear -reg ...
- Excel实用技巧
情景:有时候,我们写了一个公式,然后想在其他行也套用这个公式,一般人都是把鼠标放在那个公式所在的单元格的右下角,然后往下拉,数据量少的时候还好,数据量大的时候就不太好操作了,此时,我们需要一个好方法. ...
- MySQL的高可用设计方案的记录
一.看下常用的MySQL的高可用方案: 对上图的说明: 1)HeartBeat通过串口线或者以太网网线直连网卡对对端的服务做健康检查,并负责执行Drbd,MySQL,vip等资源的自动切换. 2)da ...
- ftp
1.url的确定 string ftpServerIP = "29.184.249.98"; string path=new Uri("ftp://"+ftpS ...
- CSS3制作同心圆进度条
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...
- ORA-01033: ORACLE 正在初始化或关闭 进程 ID: 0 会话 ID: 0 序列号: 0
用了很长时间的数据库,一直都挺好,今天早上一来报这个错,开始追究原因. 1.用SYS用户登录: 2.将数据库修改为打开状态,alter database open,出现如下的错误提示: ORA-160 ...
- DATE 日期格式
Oracle TO_DATE 日期格式 Oracle中TO_DATE格式2009-04-14 10:53TO_DATE格式(以时间:2007-11-02 13:45:25为例) ...
- Linux 常用命令 :cd命令
ls命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linu ...