一、Set 基本用法:
 
1)ES6提供了新的数据机构-Set。
它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。
先来看一段最简单的代码:
1
2
3
var s = new Set();
[2,3,5,4,5,2,2].map(x =>s.add(x));
for(i of s){console.log(i)}
得到的结果是2 3 5 4,上面的代买通过add方法向Set结构加入成员,结构表明Set结构不会添加重复的值。
Set函数可以接受一个数组作为参数,用于初始化。
1
2
var set = new Set([1,2,3,4,4]);
console.log([...set]);
结果是在控制台输出了[1,2,3,4],这两个例子都可以证明Set的成员值都是唯一的,没有重复的值。但是向Set加入值时不会发生类型转换,所以10和“10”是两个不同的值。Set内部判断两个值是否不同的算法类似于精确相等运算符(===)。这意味着,两个对象总是不相等的。唯一的例外是NaN等于自身(精确相等运算符认为NaN不等于自身)。下面看一个对象的添加例子,就能更清楚上面的话了。
1
2
3
4
let set =new Set();
set.add({});
set.add({});
console.log(set.size); //输出值为2
上面的代码表示,由于两个空对象不是精确相等,所以他们被视为两个值。
 
2)Set实例的属性和方法
Set结构的实例有以下属性:
  • Set.prototype.constructor:构造函数,默认就是Set函数
  • Set.prototype.size:返回Set实例的成员总数
Set实例的方法分为两大类:操作方法(用于操作数据)和便利方法(用于遍历数据)。
四个操作方法:
  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has( value):返回一个布尔值,表示参数是否为Set成员。
  • clear( ):清除所有成员,没有返回值。
下边是这些操作方法的代码:
1
2
3
4
5
6
7
8
var s= new Set();
s.add(1).add(2).add(2);
console.log("s.size:"+s.size);
console.log(s.has(1));//true
console.log(s.has(2));//true
console.log(s.has(3));//false
s.delete(2);//删除2的成员
console.log(s.has(2));//false
Array.from方法可以将Set结构转为数组。
1
2
3
var items = new Set([1,2,3,4,5]);
var array = Array.from(items);
console.log(array);
利用这个特性,可以去除数组的重复元素。(数组查重)
1
2
3
4
function dedupe(array){
return Array.from(new Set(array));
}
console.log(dedupe([1,2,3,3]));
输出结果为[1,2,3]
Set遍历操作
Set结构的实例有4个遍历方法,可用于遍历成员。
  • keys( ):返回一个键名的遍历器
  • values( ):返回一个键值的遍历器
  • entries( ):返回一个键值对的遍历器
  • forEach( ):使用回调函数遍历每个成员。
keys方法、values方法、entries方法返回的都是遍历器对象。由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。
1
2
3
4
5
6
7
8
9
10
11
12
let set = new Set(['red','green','blue']);
for ( let item of set.keys()){
console.log(item);
}

for(let item of set.values()){
console.log(item);
}

for( let item of set.entries()){
console.log(item);
}

上面的代码中,entries方法返回的遍历器同时包括键名和键值,所以每次输出一个数组,其两个成员完全相等。
Set结构的实例默认可遍历,其默认遍历器生成函数就是它的values方法。
1
2
Set.prototype[Symbol.iterator]===Set.prototype.values;
//true
这意味着,可以省略values方法,直接用for...of循环遍历Set。
1
2
3
4
5
let set=new Set(['red','green','blue']);
for(let x of set)
{
console.log(x);
}
由于扩展运算符(...)内部使用for...of循环,所以也可以用于Set结构。
1
2
3
let set = new Set(['red','green','blue']);
let arr = [...set];
console.log(arr);
这就提供了另一种便捷的去除数组重复元素的方法。
1
2
3
let arr=[3,5,2,2,5,5];
let unique=[...new Set(arr)];
console.log(unique);
二、WeakSet
WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。
1)首先,WeakSet 的成员只能是对象,而不能使其他类型的值。
2)其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用。也就是说,如果其他对象都不在引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet中。这个特点意味这无法引用WeakSet的成员,因此WeakSet是不可遍历的。
1
2
3
4
5
var ws = new WeakSet();
ws.add(1);
//TypeError:Invalid value used in weak set
ws.add(Symbol());
//TypeError:Invalid value used in weak set
上面的代码试图向WeakSet添加一个数值和Symbol值,结果报错。
WeakSet是一个构造函数,可以使用new命令创建WeakSet数据结构。
var ws=new WeakSet();
作为构造函数,WeakSet可以接受一个数组或类似数组的对象作为参数。(实际上,任何具有iterable接口的对象都可以作为WeakSet的参数。)该数组的所有成员都会自动成为WeakSet实例对象的成员。
1
2
3
var a = [[1,2],[3,4]];
var ws = new WeakSet(a);
console.log(ws);
上面的代码中,a是一个数组,它有两个成员,也都是数组。将a 作为WeakSet构造函数的参考,a的成员会自动成为WeakSet的成员。
WeakSet结构有以下3个方法。
  • WeakSet.prototype.add(value):向WeakSet实例添加一个新成员。
  • WeakSet.prototype.delete(value):清除WeakSet实例的指定成员。
  • WeakSet.prototype.has(value);返回一个布尔值,表示某个值是否在WeakSet实例中。
1
2
3
4
5
6
7
8
9
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
console.log(ws.has(window));//true
console.log(ws.has(foo));//false
ws.delete(window);
console.log(ws.has(window))//false
WeakSet没有size属性,没有办法遍历其成员,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员存在,很可能刚刚遍历结束,成员就不存在了。WeakSet的一个用处是存储DOM节点,而不用担心这些节点从文档移除是会引发内存泄漏。

es6的基本数据详解的更多相关文章

  1. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  2. es6入门4--promise详解

    可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...

  3. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  4. es6 Proxy对象详解

    Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...

  5. es6 Reflect对象详解

    Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有: 将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法.如:Obj ...

  6. es6实现继承详解

    ES6中通过class关键字,定义类 class Parent { constructor(name,age){ this.name = name; this.age = age; } speakSo ...

  7. ES6 中 Promise 详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...

  8. ES6中Promise详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 提供统一的 AP ...

  9. ES6 Promise用法详解

    What is Promise? Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数.执行失败后的 ...

随机推荐

  1. IDEA+MySQL实现登录注册的注册验证时出现 Cannot resolve query parameter '2'

    问题描述: 在IDEA+MySQL+Tomcat 实现登录注册JSP的注册信息INSERT验证时出现 Cannot resolve query parameter '2' 贴上创建链接的代码: if( ...

  2. referrer policy

    我们知道,在页面引入图片.JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求,浏览器一般都会给这些请求头加上表示来源的 Referrer 字段.Referrer 在分析用户来源时 ...

  3. Java中的String、StringBuilder以及StringBuffer

    https://www.cnblogs.com/dolphin0520/p/3778589.html

  4. SQLServer删除重复行

    1.如果有ID字段,就是具有唯一性的字段 delect table where id not in ( select max(id) from table group by col1,col2,col ...

  5. 我的redis入门之路

    1:操作环境:vmware12 , centOs7 ,redis5.0.3 centOs7安装与下载链接(原文地址): https://blog.csdn.net/qq_42570879/articl ...

  6. Springboot2新特性概述

    官方说明: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.0-Release-Notes 起码 JDK 8 和支持 ...

  7. jmeter生成html格式接口自动化测试报告

    jmeter生成html格式接口自动化测试报告 jmeter自带执行结果查看的插件,但是需要在jmeter工具中才能查看,如果要向领导提交测试结果,不够方便直观. 笔者刚做了这方面的尝试,总结出来分享 ...

  8. SVG初尝试(一)

    SVG简介 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它 ...

  9. Java_面向对象

    目录 一.封装 二.继承 三.多态 四.重载与重写 五.接口与抽象类 六.继承与组合 七.初始化块 面向对象的三大特征:封装.继承.多态. 一.封装 是指将对象的状态信息都隐藏在对象内部,不允许外部程 ...

  10. [转载 java 技术栈] eclipse 阅读跟踪 Java 源码的几个小技巧!

    本文基于Eclipse IDE,我们每天都使用的IDE其实提供了很多强大的功能,掌握它们,往往能够事半功倍. 1.Quick Type Hierarchy 快速查看类继承体系. 快捷键:Ctrl + ...