ES6中如何使用Set和WeakSet_javascript技巧

ES6中提供了两新数据结构-Set和WeakSet。Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值。WeakSet也是不重复的值的集合,但是只能用来存放对象。

一、Set使用

(1)Set本身提供了一个构造函数,用来生成Set数据结构。

var s = new Set();
[2,2,2,5,8,16,2,1].map(x => s.add(x))

for(i of s){console.log(i)}
//2,5,8,16,1

(2)Set()函数可以接受一个数组,作为构造参数,用于做初始化。

var s = new Set([1,2,3,4,2,4,3]);
[...s]
//[1,2,3,4]

注意:向Set中加入值的时候不会发生类型转换,所以5和”5”是两个不同的值,Set内部判断两个值是否相等,使用的是 ===,这就意味着这两个对象总是不相等。唯一列外的是NaN本身(精确相等运算符认为NaN不等于自身)

let set = new Set();
set.add({})
set.size//1
set.add({})
set.size//2

则,上面的代码表示,由于这两个空对象不是精确相等,所以是两个不同的值。

(3)Set的方法和属性

(3.1)Set的属性

Set.prototype.size:返回Set实例的成员数量。
Set.prototype.constructor:默认的构造Set函数。

(3.2)Set的操作啊函数

add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除成功。
has(value):返回一个布尔值,表示参数是否为Set的成员。
clear():清除所有成员,没有返回值。

var set = new Set();
set.add(1).add(2).add(22).add(22);
set.size//3

set.hae(22)//true
set.has(4)//false
set.delete(2)//true

(3.3)Set遍历操作

Set有四个遍历方法。可以用于遍历成员。
keys() :返回一个键名的遍历器
values() :返回一个值的遍历器
entries() :返回一个键值对的遍历器
forEach():使用回调函数遍历每个成员

注意:由于Set没有键名,只有值名,keys()和values()返回的结果是一样,

let set = new Set(['red','green','blue']);
for(let item of set.keys()){
console.log(item);
}
//red,green,blue
for(let item of set.values()){
console.log(item);
}
//red,green,blue
for(let item of set.entries()){
console.log(item);
}
//["red","red"]
//["green","green"]
//["blue","blue"]

//所以,entries方法返回的遍历器同时包括键名和值,所以每次输出的是一个数组。其实成员都是完全一样的。

注意:Set默认的可遍历,其默认遍历器生成函数就是它的values方法。
这就意味着,可以省略values方法,直接用for…of遍历。

var set = new Set([1,2,3,4]);
for(let x of set){
console.log(x);
}
//1
//2
//3
//4

如果使用扩展运算符(…)内部使用for…of 循环,所以也可以用于Set结构。

let set = new Set(['red','green','blue']);
let arr = [...set];
//['red','green','blue'];

(3.4)Set实现并集,交集,差集

let set1 = new Set([1,2,3,4,5,6]);
let set2 = new Set([4,5,6,7,8,9]);

//并集
let union = new Set([...set1,...set2]);
//[1,2,3,4,5,6,7,8,9]
//交集
let intersect = new Set([...set1].filter(x => b.has(s)));
//[4,5,6]
//差集
let intersect = new Set([...set1].filter(x => !b.has(s)));
//[1,2,3,4]

(3.5)Set实现forEach的使用

let set = new Set([1,2,3,4,5,6]);
set.forEach(value,key)=>consloe.log(vlaue+1);
//2
//3
//4
//5
//6
//7

注意:forEach方法的参数就是一个处理函数,该函数依次为(键值,键名)集合本身。另外,forEach方法还有第二个参数,表示绑定this的对象。

二、WeakSet使用

WeakSet类似于Set,也是不重复的值的集合。但是它只能用于存储对象。而不能是其他类型的值。
WeakSet是一个个构造函数。可以接受数组和类似数组的对象作为参数。(实际上,任何具作为iterable接口的对象都可以作为WeakSet的参数)。该数组的所有成员都会自动成为WeakSet的实例对象的成员。
var a = new [[1,2],[3,4]];
var ws = new WeakSet(a);

var ws = new WeakSet();
ws.add(1);//TypeError:Invalid value used in weak set
ws.add(Symbol);//TypeError:Invalid value used in weak set 

添如一个数值和一个Symbol,结果同时报错。

WeakSet结构有以下的上方法
WeakSet.protoptype.add(value):向WeakSet实例添加一个新成员。
WeakSet.protoptype.delete(value):删除WeakSet实例指定成员。
WeakSet.protoptype.has(value):返回一个布尔值,表示某个值是否在WeakSet实例中。

var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window);//true
ws.has(foo);false
ws.delete(window);//true
ws.has(window);//false

WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历不能保证成员的存在。可能刚刚遍历结束,成员就取不到了。WeakSet的一个用处是存储DOM节点,而不用担心这些节点从文档移除时,会引起内存的泄露。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索set
, es6
WeakSet
es6 weakset、es6 weakmap、javascript es6、javascript es6阮一峰、es6和javascript,以便于您获取更多的相关知识。

时间: 2024-09-11 21:56:06

ES6中如何使用Set和WeakSet_javascript技巧的相关文章

ES6中的数组扩展方法_javascript技巧

form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: var inputObjs=document.getElementsByTagName('input'); for(var i=0;i<inputObjs.length;i++){ if(inputObjs[i].type==='button'){ inputObjs[i].onclick=func

ES6中非常实用的新特性介绍_javascript技巧

ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环 这个东西用来循环数组很爽,原因呢,是因为它弥补了目前

深入理解React中es6创建组件this的方法_javascript技巧

首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

JavaScript ES6中CLASS的使用详解_javascript技巧

前言 对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成"构造函数"的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复

详解ES6中的let命令_javascript技巧

let是ES6里面新的复制命令,let赋值命令只可以在{}代码块中被调用.下面通过实例给大家讲解es6中的let命令,具体内容如下所示: 1.let命令的用法和var命令类似,但let命令声明的变量只在let所在的代码块内有效 { let a=10; var b=1; } console.log(a);//Uncaught ReferenceError: a is not defined console.log(b); 2.let命令不存"声明提前"现象,因此变量一定要先声明,后使用

[译] ES6+ 中的 JavaScript 工厂函数(第八部分)

本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliott 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:lampui 校对者:IridescentMia.sunui Smoke Art Cubes to Smoke - MattysFlicks - (CC BY 2.0) 注意:这是"软件编写"系

浅析Javascript ES6中的原生Promise_基础知识

前言 一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观.而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单. Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔问题的出现.不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解. 举例如下: db.save(data, function(

在ASP中调用DCOM组件的应用技巧

在ASP中调用DCOM组件的应用技巧 1.编写DCOM组件: 假设我们想通过ASP页面来远程启动DNS服务,并且DNS服务器与Web服务器不为同一台机器.我们可以编写一个ActiveX DLL 来实现这个功能. 首先我们建立一个批处理文件StartDNS.bat,文件中写入:Net Start DNS.将文件保存在DNS服务器的一个目录下,例如C:\ManDNS\: 其次我们编写 Dll 程序如下(VB编写): Public Function StartDNS() As Boolean On E

IOS开发:在Swift中使用JavaScript的方法和技巧

  在RedMonk发布的2015年1月编程语言排行榜中,Swift采纳率排名迅速飙升,从刚刚面世时的68位跃至22位,Objective-C仍然稳居TOP10,而JavaScript则凭借着其在iOS平台上原生体验优势成为了年度最火热的编程语言. 开发:在Swift中使用JavaScript的方法和技巧-"> 而早在2013年苹果发布的OS X Mavericks和iOS 7两大系统中便均已加入了JavaScriptCore框架,能够让开发者轻松.快捷.安全地使用JavaScript语言