一、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. 出现: object() takes no parameters 之后应该如何修改

    这个错误花费了很多的时间去解决,包括重写代码也无济于事. 因为粗心,浪费了很多的时间在这个上面,特写此博客来记录,也希望朋友们不要粗心,特别是初学者. 接下来进入正文: 当在写self.XXX  下方 ...

  2. npx命令介绍

    什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If you do not have a package.json, create one before installing ...

  3. SQL server 数据库中插入中文变???格式乱码的问题另一种容易忽略的情况(C#操作dapper)

    1.先查查 VS2015 中的XXX.cs页面中编码格式,记事本打开另存一下,编码格式可能是ANSI改为unioncode. (中文前面加N或者改排序规则解决不了的情况有可能是以上原因.)

  4. python封装configparser模块获取conf.ini值

    configparser模块是python自带的从文件中获取固定格式参数的模块,因为是python只带的,大家用的应该很多,我觉得这个参数模块比较灵活,添加参数.修改参数.读取参数等都有对应的参数供用 ...

  5. python设置虚拟环境

    一.介绍 虚拟环境-virtualenv是一个用于隔绝的python环境的工具,虚拟环境与本地环境互相隔离,互不影响,例如我们要安装django2.0的版本但是本地已经安装了1.1的,这时只需要在本地 ...

  6. vue-router路由动态传参query和params的区别

    1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...

  7. Javascrip动态添加样式,Dom操作,获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  8. 【spark】dataframe常见操作

    spark dataframe派生于RDD类,但是提供了非常强大的数据操作功能.当然主要对类SQL的支持. 在实际工作中会遇到这样的情况,主要是会进行两个数据集的筛选.合并,重新入库. 首先加载数据集 ...

  9. 高可用Redis(三):Hash类型

    1.哈希类型键值结构 哈希类型也是key-value结构,key是字符串类型,其value分为两个部分:field和value 其中field部分代表属性,value代表属性对应的值 上面的图里,us ...

  10. layUI弹出框提示

    简单介绍:项目使用layUI框架好久了,也没来的及写一篇关于layUI弹出层的随笔.现在补上.经常用到的,一般都是在ajax成功回调函数后边写. //js代码 s和fail 是ajax返回的数据lay ...