Set 和 Map 数据结构

1.set

基本用法

ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值

Set本身是一个构造函数,用来生成Set数据结构

const s = new Set();
[2,3,5,4,5,2,2].forEach(x => s.add(x))
for (let i of s) {
console.log(i);
}
// 2 3 5 4

上面代码通过add()方法向Set结构加入成员,结果表明Set结构不会添加重复的值

Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4] // 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // // 例三
const set = new Set(document.querySelectorAll('div'));
set.size // // 类似于
const set = new Set();
document
.querySelectorAll('div')
.forEach(div => set.add(div));
set.size //

上面代码中,例1和例2都是Set函数接受数组作为参数,例3是接受类似数组的对象作为参数

上面代码也展示了一种去除数组重复成员的方法。

// 去除数组的重复成员
[...new Set(array)]

上面的方法也可以用于,去除字符串里面的重复字符。

[...new Set('ababbc')].join('')
// "abc"

向 Set 加入值的时候,不会发生类型转换,所以5"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

上面代码向 Set 实例添加了两个NaN,但是只能加入一个。这表明,在 Set 内部,两个NaN是相等。

另外,两个对象总是不相等的。

let set = new Set();

set.add({});
set.size // set.add({});
set.size //

上面代码表示,由于两个空对象不相等,所以它们被视为两个值。

Array.from方法可以将 Set 结构转为数组。

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

这就提供了去除数组重复成员的另一种方法。

function dedupe(array) {
return Array.from(new Set(array));
} dedupe([1, 1, 2, 3]) // [1, 2, 3]

ES6学习笔记(二)的更多相关文章

  1. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  2. ES6学习笔记(二)——字符串扩展

    相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...

  3. ES6学习笔记二

    字符串遍历 var str = 'hello'; for(let s of str){console.log(s += ' ')} //h e l l o 字符串查找:添加了include(str,i ...

  4. ES6学习笔记二:各种扩展

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 1:字符串遍历器 for (let char of str) { // ...

  5. es6学习笔记二:生成器 Generators

    今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是“最具魔力的”?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来 ...

  6. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  7. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  8. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  9. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

随机推荐

  1. js.alert(重写)

    function dialogFn(Msg, btnOkCallBack, btnCancelCallBack) { $("body").append('<div id=&q ...

  2. 基于zookeeper实现分布式配置中心(一)

    最近在学习zookeeper,发现zk真的是一个优秀的中间件.在分布式环境下,可以高效解决数据管理问题.在学习的过程中,要深入zk的工作原理,并根据其特性做一些简单的分布式环境下数据管理工具.本文首先 ...

  3. 洛谷P3190 [HNOI2007]神奇游乐园(插头dp)

    传送门 大概是算第一道自己做出来的插头dp? (虽然都是照着抄板子的) (虽然有个地方死活没调出来最后只能看题解才发现自己错在哪里的) 我就当你们都会插头dp了…… 因为必须得是一条路径,所以扫描线上 ...

  4. IT兄弟连 Java语法教程 Java开发环境 安装JDK

    因为我们要开发Java程序,所以必须在我们的计算机中安装Sun(Oracle)公司提供给我们的JDK.目前最新版本的JDK是JDK 10,但是我们以学习JDK 8为主,所以我们要安装的版本是JDK 8 ...

  5. 求n位水仙花数

    求n位水仙花数 A.两个关键 1.n位水仙花数的范围是什么? n位水仙花数的范围是[10n-1,10n) 2.如何判断是否为水仙花数 核心操作: 2-1.如何得到每一位? A.核心思想 对得到的数进行 ...

  6. jsp网站访问次数统计

    JSP 点击量统计 有时候我们需要知道某个页面被访问的次数,这时我们就需要在页面上添加页面统计器,页面访问的统计一般在用户第一次载入时累加该页面的访问数上. 要实现一个计数器,您可以利用应用程序隐式对 ...

  7. 黑马学习AJAX jQuery发送异步请求 $.ajax() $.post() $.get()是在调用方法而不是定义方法

  8. POJ-3352-RoadConstruction(边双联通分量,缩点)

    链接:https://vjudge.net/problem/POJ-3352#author=0 题意: 给一个无向连通图,至少添加几条边使得去掉图中任意一条边不改变图的连通性(即使得它变为边双连通图) ...

  9. 041 First Missing Positive 第一个缺失的正数

    给一个未排序的数组,找出第一个缺失的正整数.例如,[1,2,0] 返回 3,[3,4,-1,1] 返回 2.你的算法应该在 O(n) 的时间复杂度内完成并且使用常数量的空间.详见:https://le ...

  10. (转)命令passwd报错因inode节点处理记录

    命令passwd报错因inode节点处理记录 原文:http://blog.sina.com.cn/s/blog_506ed9e6010106kj.html 故障现象:      1.修改密码时报错 ...