一、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. 彻底解决MacOS上应用程序快捷键冲突的问题,自定义快捷键设置

    1看图操作 上面选择好你要修改的应用程序的快捷键 ,我以Chrome为例子 最后点击下ADD 然后回到Chrome的菜单,发现刷新页的快捷键变成了F5 注意,快捷键的名字要和你Chrome菜单上的名字 ...

  2. Spring AOP获取方法的参数名称和参数值

    aop配置: <aop:aspectj-autoproxy expose-proxy="true" /> @Before(value = "execution ...

  3. 如何使用Linux的Crontab定时执行PHP脚本的方法[转载]

    首先说说cron,它是一个linux下的定时执行工具.根用户以外的用户可以使用 crontab 工具来配置 cron 任务.所有用户定义的 crontab 都被保存在/var/spool/cron 目 ...

  4. 【easy】572. Subtree of Another Tree

    判断一棵树中是否包含另一棵子树(包含是,两棵树重合处的根节点之下的子节点都相等) 有两种方法: 方法二:递归写法 //方法一:可以借鉴之前序列化的题目,如果序列化得到的序列一样就是相同的树 //方法二 ...

  5. java--序列化和反序列化

    一.序列化 java序列化的过程是把对象转换为字节序列的过程 序列化的两种用途: 1)把对象的字节序列永久保存大搜硬盘上,通常存放到一个文件中 2)在网络上传送对象的字节序列 jdk中的序列化API: ...

  6. vue 双向数据绑定的实现学习(二)- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  7. 如何用java实现一个p2p种子搜索(2)-路由表实现

    路由表实现 回顾一下上一篇讲的内容,上一篇提到从dht网络中获取infohash,那么加入dht网络后的最重要的第一步就是怎么去建立路由表. 路由表里面保存的是dht中其他node的信息,所以node ...

  8. react給變量賦值并列元素

    今天在使用react時發現一個問題:我在給一個變量賦值多個元素,但不能用div包含起來. 如: var p = <div> <p></p> <p>< ...

  9. Mac环境下 elasticsearch-6.0.1 和 elasticsearch-head 完整安装过程

     安装步骤: 安装java jdk 安装elasticsearch-6.0.1 及中文分词 anslysis-ik-6.0.1 安装elasticsearch-head 下载jdk https://w ...

  10. phpredis扩展实现LBS距离计算和范围筛选

    来源 public function geo(){ $redis = new \redis(); $redis -> connect('127.0.0.1',6379); //位置增加 $res ...