一、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. windows下搭建Kafka,并通过命令窗口收发消息

    参考网址: https://blog.csdn.net/ydc321/article/details/70154278 前提条件:windows环境需要安装jdk 1.下载Kafka,可以通过官网下载 ...

  2. angular Observable

    1.回调函数 /** 1.设计实现函数 */ print_msg(msg) { console.log(msg); } /** 2.设计调用函数,param1:实现函数参数,param2:实现函数本身 ...

  3. module.ngdoc

    译自Angular's module docs 1.模块 大部分的应用都有一个主要的方法来实例化,链接,引导.angular应用没有这个方法,而是用模块声明来替代. 这种方式的优点: *程序的声明越详 ...

  4. ESLint学习小记

    一.关于配置文件,优先级从上到下: eslintrc.js .eslintrc.yaml .eslintrc.yml .eslintrc.json .eslintrc package.json 在官方 ...

  5. Linux安装Jdk Tomcat MySQL

    Jdk安装 Tomcat安装 Mysql安装 Jdk安装 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html ...

  6. json中的json.dumps()

    Json简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...

  7. Python爬虫基础之Cookie

    一.Cookie会话 简单地说,cookie就是存储在用户浏览器中的一小段文本文件.Cookies是纯文本形式,它们不包含任何可执行代码.一个Web页面或服务器告之浏览器来将这些信息存储并且基于一系列 ...

  8. Python env使用(virtualenv)

    前言 Python 的 virualenv 模块闻名已久,乘着有点时间,学习一下 变更记录 # 19.3.26  创建文章 # 19.3.27  完善文章 正文 安装 pip install virt ...

  9. HTTP请求(Request)和回应(Response)对象

    附录H HTTP请求(Request)和回应(Response)对象 57 http://djangobook.py3k.cn/ Django使用request和response对象在系统间传递状态. ...

  10. An incompatible version [1.1.29] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]

    问题描述   首先,这是一个提示信息而不是报错,并不影响 Tomcat 的使用.它是建议你使用一个 Tomcat 的性能调优原生库文件 tcnative-1.dll   几天前,我想尝试一下 Apac ...