一、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. JAVA的运算符和条件结构

    一.JAVA的运算符. 1.赋值运算符 赋值就是把一个变量的值赋给另一个变量. 语法: 变量名=表达式     例如  n = m + 5 2.算术运算符      算术运算符是数学中常用的加.减.乘 ...

  2. opencv基础教程 之 图像基础和绘图

    1,教程:感谢小强 2,用argparse传参数来显示一张图片 #!/usr/bin/python #linux系统 #coding=utf-8 import cv2 import argparse ...

  3. Python自动化中的键盘事件

    1) from selenium import webdriver 加载模块 2) b = webdriver.Friefox() 打开浏览器 3) b.get(‘http://xxxxxxx’) 打 ...

  4. JavaScript 事件委托详解

    基本概念 事件委托,通俗地来讲,就是把一个元素响应事件(click.keydown......)的函数委托到另一个元素: 一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事 ...

  5. SQL CE 和 SQLite数据库对比测试

    于项目需要,在客户端需要做数据存储功能,考虑到部署方便同时满足功能需要的情况下选择了SQLCE 和SQLite两种数据库进行客户端数据存储.当然还有很多其他的方式做本地数据存储,比如本地文件存储.微软 ...

  6. pycharm远程调试docker容器内程序

    文章链接: https://blog.csdn.net/hanchaobiao/article/details/84069299 参考链接: https://blog.csdn.net/github_ ...

  7. form 组件

    https://www.cnblogs.com/wupeiqi/articles/6144178.html class F2Form(forms.Form): title1=fields.CharFi ...

  8. MUI上传图片之选择相册和相机上传

    1.因为项目中有三处地方需要上传,所以html中存在三处地方.身份证正反面为上传一张,发票限制上传9张. <div class="action1"> <!--展示 ...

  9. ORACLE根据两个表都含有的字段条件来判断两个表连接后有没有数据

    A表  字段1 字段2 B表  字段1 字段3 A表的字段1=B表的字段1 SELECT DISTINCT A.字段2 FROM TABEL1  A ,TABEL2  B  WHERE  A.字段1 ...

  10. Linux 常用命令介绍

    介绍常用命令,在忘记时便于即使查询 复制.移动.删除     cp.mv.rm.pwd 1. CP 介绍 用法:CP [-adfilprsu]  源文件  目标文件 参数:参数说明: -a:是指arc ...