ES6新数据结构Set与WeakSet用法分析

本文实例讲述了ES6新数据结构Set与WeakSet用法。分享给大家供大家参考，具体如下：

新数据结构Set与WeakSet

1. Set

Set类似于数据，但是成员值都是唯一的。生成Set的方式如下。

var s = new Set();
[1,1,3,3,5,5].map( x => s.add(x) );
console.log(s); //Set {1, 3, 5}

没有重复值哟，如果面试官再让你编写数组去重的函数是不是简单多了。或者你可以这样写。

var set = new Set( [2,2,4,4,6,6] ); //Set {2, 4, 6}
console.log(set);

其实，Set作为构造函数使用时，接受的参数不仅可以是数组，任何类数组的对象也可以。Set的成员可以是对象，只是每个对象唯一。

那么，我们如何操纵Set呢。

s.add(val); //为s添加val，返回s
s.delete(val); //删除val，返回表示成功与否的布尔值
s.has(val); //返回表示s是否拥有成员val的布尔值
s.clear(); //清除所有成员

map与filter方法可以作用于数组，也可以用于Set（见第一个代码块）。

那么，我们如何遍历Set呢。

依然是 keys() , values() , entries() , forEach() . 举例如下（默认情况下Set的键与值相同）：

var s = new Set();
var ul = document.getElementsByTagName('ul');
[1,1,3,3,5,5].map( x => s.add(x) );
for ( let key of s.keys() ){
  console.log(key); //1 ， 3， 5
}
for ( let val of s.values() ){
  console.log(val); //1， 3，5
}
for ( let item of s.entries() ){
  console.log(item[0],item[1]); // 1 1 ， 3 3， 5 5
}
for ( let [key,val] of s.entries() ){
  console.log(key,val); // 1 1 ， 3 3， 5 5
}
s.forEach( function( val , key , ul ){
  console.log( this ); //ul
  console.log( val , key);
} , ul );

可以使用...扩展操作符把Set转换成数组。

2.WeakSet

WeakSet与Set类似，也是不重复的集合。区别在于：WeakSet的成员只能是对象；WeakSet中的对象是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用。当其他变量不再引用某对象，其将被垃圾回收机制回收，哪怕这个对象被WeakSet引用。这意味着，WeakSet的成员是无法被引用的，无法遍历WeakSet。WeakSet只有add、delete和has三个方法。注意：WeakSet没有size属性，也没有forEach方法。

对于WeakSet不能被遍历，可以这样解释。因为其成员都是弱引用，随时可能消失，遍历机制无法保证其成员一直存在。

那你可能问，WeakSet用来做什么，答，储存DOM节点，这样移除DOM时就可以不用担心内存泄漏了。

希望本文所述对大家ECMAScript程序设计有所帮助。

赞 (0)

相关推荐

  • ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso

  • JS ES6中setTimeout函数的执行上下文示例

    本文介绍的是setTimeout函数,延迟执行函数里的执行上下文,分享给大家供大家参考学习,来看看详细的内容: (1)ES5中,setTimeout里面的函数的执行上下文为全局上下文,举例来说: function log(){ setTimeout(function(){console.log(this.id)},100) } var id=42 log.call({id:21}) //输出的结果为42 我们可以看到setTimeout,被延迟执行的函数,里面的this,指向的是全局作用域,也就

  • ES6新特性五：Set与Map的数据结构实例分析

    本文实例讲述了ES6新特性五之Set与Map的数据结构.分享给大家供大家参考,具体如下: 1. Set ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) console.log(s); //Set { 2, 3, 5, 4 } ② 属性和方法 Set结构有以下属性. Set.prototype.constructor:构造函数

  • Javascript ES6中对象类型Sets的介绍与使用详解

    介绍 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. Sets 是ES6(ES2015)中一个新的对象类型,用来创建一系列唯一值的集合.集合中的值可以是简单的原始类型如字符串(strings)或整数(integers),也可以是更复杂的对象类型如对象字面量或者数组. 基本方法 下面是基本的set及其方法(add, size, has, forEach, delete, clear

  • ES6使用Set数据结构实现数组的交集、并集、差集功能示例

    本文实例讲述了ES6使用Set数据结构实现数组的交集.并集.差集功能.分享给大家供大家参考,具体如下: Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值. Set本身是一个数据结构,用来生成Set数据节后 Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员 由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),

  • ES6中如何使用Set和WeakSet

    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()函数可以接受一个数组,作为构造参数,

  • ES6 javascript中class类的get与set用法实例分析

    本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

  • ES6教程之for循环和Map,Set用法分析

    本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • ES6新数据结构Set与WeakSet用法分析

    本文实例讲述了ES6新数据结构Set与WeakSet用法.分享给大家供大家参考,具体如下: 新数据结构Set与WeakSet 1. Set Set类似于数据,但是成员值都是唯一的.生成Set的方式如下. var s = new Set(); [1,1,3,3,5,5].map( x => s.add(x) ); console.log(s); //Set {1, 3, 5} 没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了.或者你可以这样写. var set = new Set(

  • ES6新数据结构Map功能与用法示例

    本文实例讲述了ES6新数据结构Map功能与用法.分享给大家供大家参考,具体如下: 新数据结构Map JavaScript中对象的本质是键值对的集合,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map.Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇).请看下面例子. var m = new Map(); var ul = document.getElementsByTagName('ul'); m.set(ul,'hi'); co

  • ES6新特性之Symbol类型用法分析

    本文实例讲述了ES6新特性之Symbol类型用法.分享给大家供大家参考,具体如下: Symbol类型 1. 为了避免属性名的冲突,ES6新增了Symbol类型.Symbol可以产生一个独一无二的值. let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1); //Symbol(a) console.log(typeof s1); //symbol console.log(s1 == s2); //false 2.Symbol用于属性名

  • es6新特性之 class 基本用法解析

    javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. es6 class 与es5的面向对象的区别: 1. 写法不同,使用关键字class 2.当new一个实例,默认有一个constructor方法,且默认返回实例对象(this),也可以返回另一对象 3.类的所有方法都在prototype属性上,但是不

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

  • python3新特性函数注释Function Annotations用法分析

    本文分析了python3新特性函数注释Function Annotations用法.分享给大家供大家参考,具体如下: Python 3.X新增加了一个特性(Feature),叫作函数注释 Function Annotations 它的用途虽然不是语法级别的硬性要求,但是顾名思义,它可做为函数额外的注释来用. Python中普通的函数定义如下: def func(a, b, c): return a + b + c >>> func(1, 2, 3) 6 添加了函数注释的函数会变成如下形式

  • ES6新特性之Object的变化分析

    本文实例讲述了ES6新特性之Object的变化.分享给大家供大家参考,具体如下: Object的变化 1. ES6允许在对象中只写属性名,不写属性值,属性值为属性名对应的变量值. var a = 'hi'; var obj = {a}; console.log(obj); //Object {a: "hi"} 2.对象内方法的简写. var a = 'hi'; var obj = { name: 'ES6', a, sayHi(){ console.log(this.a+' '+thi

  • PHP7.1新功能之Nullable Type用法分析

    本文实例分析了PHP7.1新功能之Nullable Type用法.分享给大家供大家参考,具体如下: 在 PHP5 时代,PHP 的参数已经支持 type hint(除了基本类型),想必大家应该很熟悉:后来 PHP7 时代来临,PHP 也可以指定返回值的类型(以及基本类型的 type hint).但我们可能还有一种需求:除了指定的 type hint,参数或者返回值也能定义可以为 null,举个例子,假如我们有一个 UserRepository 类,有一个方法叫 find($id),此方法可返回一

  • ES6新特性八：async函数用法实例详解

    本文实例讲述了ES6新特性之async函数用法.分享给大家供大家参考,具体如下: 1. async 函数是什么? node.js 版本7及之后版本才支持该函数. 可以简单的理解为他是Generator 函数的语法糖,即Generator 函数调用next() 返回的结果. ① Generator 函数需要next() 或执行器进行执行,而async 函数只需和普通函数一样执行. ② async和await,比起星号和yield,语义更清楚了.async表示函数里有异步操作,await表示紧跟在后

随机推荐