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程序设计有所帮助。
相关推荐
-
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新增数据结构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
-
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
本文实例讲述了ES6使用Set数据结构实现数组的交集.并集.差集功能.分享给大家供大家参考,具体如下: Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值. Set本身是一个数据结构,用来生成Set数据节后 Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员 由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),
-
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 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); } }
-
Javascript ES6中对象类型Sets的介绍与使用详解
介绍 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. Sets 是ES6(ES2015)中一个新的对象类型,用来创建一系列唯一值的集合.集合中的值可以是简单的原始类型如字符串(strings)或整数(integers),也可以是更复杂的对象类型如对象字面量或者数组. 基本方法 下面是基本的set及其方法(add, size, has, forEach, delete, clear
-
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:构造函数
-
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新数据结构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表示紧跟在后
随机推荐
- asp获取客户端某一个图片的x,y坐标的代码
- 详解基于angular路由的requireJs按需加载js
- iOS开发中导航控制器的基本使用教程
- AlertBox 弹出层信息提示框效果实现步骤
- Javascript中常用类型的格式化方法小结
- php mysql PDO 查询操作的实例详解
- PHP中的socket_read和socket_recv区别详解
- xtemplate node.js 的使用方法实例解析
- JS设计模式之惰性模式(二)
- PHP对XML内容进行修改和删除实例代码
- 流量统计器如何鉴别C#:WebBrowser中伪造referer
- jQuery实现自动调用和触发某个事件的方法
- JavaScript页面模板库handlebars的简单用法
- JavaScript Tween算法及缓动效果第1/2页
- Android 如何收集已发布程序的崩溃信息
- 举例理解C语言二维数组的指针指向问题
- PHP写UltraEdit插件脚本实现方法
- C语言线性表顺序存储结构实例详解
- spring cloud升级到spring boot 2.x/Finchley.RELEASE遇到的坑
- mysql 8.0.15 winx64解压版安装配置方法图文教程