ES6,新增数据结构Set的用法
ES6 提供了新的数据结构 Set。
特性
似于数组,但它的一大特性就是所有元素都是唯一的,没有重复。
我们可以利用这一唯一特性进行数组的去重工作。
单一数组的去重。
let set6 = new Set([1, 2, 2, 3, 4, 3, 5])
console.log('distinct 1:', set6)
结果:
distinct 1: Set { 1, 2, 3, 4, 5 }
多数组的合并去重
let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6]
let set7 = new Set([...arr1, ...arr2])
console.log('distinct 2:', set7)
结果:
distinct 2: Set { 1, 2, 3, 4, 5, 6 }
操作
1.向Set中添加元素。
let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log('added:', set1)
结果:
added: Set { 1, 2, 3 }
2.从Set中删除元素。
let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('deleted:', set1)
结果:
deleted: Set { 2, 3 }
3.判断某元素是否存在。
let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('has(1):', set1.has(1))
console.log('has(2):', set1.has(2))
结果:
has(1): false
has(2): true
4.清除所有元素。
let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.clear()
console.log('cleared:', set1)
结果:
cleared: Set {}
Set和Array互转
1.数组转Set
let set2 = new Set([4,5,6])
console.log('array to set 1:', set2) let set3 = new Set(new Array(7, 8, 9))
console.log('array to set 2:', set3)
结果:
array to set 2: Set { 4, 5, 6 }
array to set 3: Set { 7, 8, 9 }
2.Set转数组
let set4 = new Set([4, 5, 6])
console.log('set to array 1:', [...set4])
console.log('set to array 2:', Array.from(set4))
结果:
set to array 1: [ 4, 5, 6 ]
set to array 2: [ 4, 5, 6 ]
遍历
可以使用Set实例对象的keys(),values(),entries()方法进行遍历。
由于Set的键名和键值是同一个值,它的每一个元素的key和value是相同的,所有keys()和values()的返回值是相同的,entries()返回的元素中的key和value是相同的。
let set5 = new Set([4, 5, 'hello'])
console.log('iterate useing Set.keys()')
for(let item of set5.keys()) {
console.log(item)
} console.log('iterate useing Set.values()')
for(let item of set5.values()) {
console.log(item)
} console.log('iterate useing Set.entries()')
for(let item of set5.entries()) {
console.log(item)
}
结果:
iterate useing Set.keys()
4
5
hello
iterate useing Set.values()
4
5
hello
iterate useing Set.entries()
[ 4, 4 ]
[ 5, 5 ]
[ 'hello', 'hello' ]
其他特性
在向Set加入值时,Set不会转换数据类型,内部在判断元素是否存在时用的类似于精确等于(===)的方法,“2”和2是不同的,NaN等于其自身。
let set8 = new Set()
set8.add(NaN)
set8.add(NaN)
console.log('NaN===Nan is true:', set8)
结果:
NaN===Nan is true: Set { NaN }
End
ES6,新增数据结构Set的用法的更多相关文章
- ES6,新增数据结构Map的用法
Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成 ...
- ES6——新增数据结构Set与Map的用法
ES6 提供了新的数据结构 Set以及Map,下面我们来一一讲解. 一.Set 特性 似于数组,但它的一大特性就是所有元素都是唯一的,没有重复. 我们可以利用这一唯一特性进行数组的去重工作. 1.单一 ...
- ES6,新增数据结构WeakSet的用法
WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = ...
- es6新增功能
声明命令 1. let命令 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.下面代码在代码块之中,分别用let和var声明了两个变量.然 ...
- ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))
1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...
- 【ES6新增语法详述】
目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...
- ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓
现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- ES6新增的数据类型Map和Set。
Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
随机推荐
- ios中自定义checkbox
//自定义button#import <UIKit/UIKit.h> @interface CKButton : UIButton @end #import "CKButton. ...
- spring 自动装配 default-autowire="byName/byType"
<PRE class=html name="code">spring 自动装配 default-autowire="byName/byType" ...
- 可扩展的Web系统和分布式系统(Scalable Web Architecture and Distributed Systems)
Open source software has become a fundamental building block for some of the biggest websites. And a ...
- iOS 常用的几个math函数
1.取整数 double ceil (double); 取上整 double floor (double); 取下整 2.绝对值 double fabs (double);求绝对值 double ca ...
- Windows下SVN备份脚本
本站备份:svn备份与还原_脚本_(dump命令) 以下是转载记录, 转自:https://wuxiaobai.win/archives/111 用法 svnadmin dump REPOS_PATH ...
- 【JavaScript】浅析ajax的使用
目录结构: contents structure [+] Ajax简介 Ajax的工作原理 Ajax的使用步骤 使用原生的js代码 使用JQuery代码 JQuery中常用的Ajax函数 $.ajax ...
- angular之service、factory预provider区别
昨晚项目组做了angular分享,刚好有讨论到这个问题.虽然许久不做前端开发,但是兴趣所致.就查阅了下资料,以便后续需要使用 自己的理解:service是new出来的,factory是直接使用就能获得 ...
- idea13注册机
public class Keygen { /** * @param s * @param i * @param bytes * @return */ public static short getC ...
- 第2章 Python基础-字符编码&数据类型 购物车&多级菜单 作业
作业 一.三级菜单 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, ...
- 通过Canvas及File API缩放并上传图片完整演示样例
创建一个只管的用户界面,并同意你控制图片的大小.上传到server端的数据,并不须要处理enctype为 multi-part/form-data 的情况.只一个简单的POST表单处理程序就能够了. ...