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的更多相关文章

  1. 前端笔记之React(六)ES6的Set和Map&immutable和Ramda和lodash&redux-thunk

    一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 E ...

  2. 深入理解ES6之—set与map

    Set是无重复值的有序列表.Set会自动移除重复的值,因此你可以使用它来过滤数组中重复的值并返回结果. Map是有序的键值对,其中的键允许是任何类型. Set和Map是es6新增的两个数据集合. Se ...

  3. ES6新增的数据类型Map和Set。

    Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...

  4. ES6中Set 和 Map用法

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

  5. es6入门set和map

    ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var set = new Set([1, ...

  6. ES6,新增数据结构Map的用法

    Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成 ...

  7. ES6学习笔记之map、set与数组、对象的对比

    ES6 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一 ...

  8. ES6系列_12之map数据结构

    1.map数据结构出现的原因? JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制.为了能实现将对象作为键 ...

  9. es6的Set和Map数据结构

    Set 和 Map 数据结构 Set WeakSet Map WeakMap Set § ⇧ 基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set ...

随机推荐

  1. 删除项目中的.svn信息

    有时候我们新开发一个项目时,会将以前的项目从svn上down下来,然后复制一份.这样就会有个问题,项目中的svn信息就会一直存在.下面介绍删除方法: 1.新建一个.txt的文档.然后将下面代码粘贴到文 ...

  2. PHP数组的常用函数

    在PHP中数组是种强大的数据类型,他可以做的事情很多,可以存储不同的数据类型在一个数组中,下面我们列出了数组常用的操作,排序,键名对数组排序等做法. /* 数组的常用函数  *  * 数组的排序函数 ...

  3. 如何定位Sharepoint网站集所在的w3wp进程

     方法1.    直接开始运行,输入cmd,再输入iisapp可以列出当前所有IIS中的WebApplication所对应的w3wp.exe进程,后面都有一个进程号标识,在VS中调试的时候附加到对应进 ...

  4. CSS 宝典

    input点击时候,有个灰块 outline:medium; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-modify:read-w ...

  5. OC的封装、继承与多态

    面向对象有三大特征:封装.继承和多态. 一.封装 封装是将对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部信息,而是通过该类所提供的方法来实现对内部信息的操作和访问.简而言之,信息隐藏,隐 ...

  6. 基本变换(读书笔记5 --- Real-Time rendering)

    刚体变换 即变换不改变了被变换顶点之间的距离,以及偏手性(不会让左右手坐标系颠倒). 下面的平移变换.旋转变换即属于刚体变换 平移 从一个位置变到另一个位置可以用平移矩阵T来表示,这个矩阵将一个实体变 ...

  7. 开发《基于Arcgis Online的家政管理服务信息系统》随笔2

    解决了三天的一个问题终于搞定了,和大家分享一下... 1.来点开胃菜,  在Sql server 2008中想要增加修改字段,有时不能修改,作如下操作即可搞定此问题, 启动MSSQL SERVER 2 ...

  8. 用CMake屏蔽Release运行时的控制台窗口

    在默认情况下,CMake构建的VS工程运行时会弹出控制台窗口,可以通过手动方式进行屏蔽,也可以通过CMake命令进行屏蔽. 手动方式:分为两步 第一步:右击VS项目,选择"属性"- ...

  9. 35、重新复习html与css(1)

    1.html与css的结合方式 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht ...

  10. Windows下Eclipse+Scala+Spark开发环境搭建

    1.安装JDK及配置java环境变量 本文使用版本为jdk1.7.0_79,过程略 2.安装scala 本文使用版本为2.11.8,过程略 3.安装spark 本文使用版本为spark-2.0.1-b ...