ES6 Set结构的应用实例分析


Posted in Javascript onJune 26, 2019

本文实例讲述了ES6 Set结构的应用。分享给大家供大家参考,具体如下:

Set 类似于数组,但是成员的值都是唯一的,没有重复的值, 实现了iterator接口

set 的值不可重复,数组的值可以重复

let arr = [1,2,3,'5','5'];
let st = new Set(arr);
console.log(st); // 可以通过set来去除数组的重复的值,返回的是一个伪数组
console.log(st.size); // 4

set 的 add , delete, has, clear 方法

简单的add 与 delete :

let st = new Set();
var u = {name:'Joh'};
st.add(u);
let bool = st.delete(u);
console.log(bool); // true;

连续add与has的api :

let st = new Set();
var u = {name:'Joh'};
var r = {name:'Lily'};
st.add(u).add(r);
let bool = st.delete(r);
console.log(bool); // true
console.log(st.has(r)); // false
console.log(st.has(u)); // true;

clear清空set集合

let st = new Set();
var u = {name:'Joh'};
var r = {name:'Lily'};
st.add(u).add(r);
st.clear();
console.log(st.size); // 0

通过Array.from方法把类似数组结构的模型转化为数组

let arr = ['xxx', 'yyyy', 'yyyy'];
let newArr = Array.from(new Set(arr));
console.log(Array.isArray(newArr)); // true
console.log(newArr); // ["xxx", "yyyy"]

Set 原型上的Symbol.iterator 和 values 是同一个值, 可直接for-of遍历

console.log(Set.prototype[Symbol.iterator] === Set.prototype.values); // true
let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']);
for(let k of st) {
 console.log(k); // 依次输出 xxx yyyy John 可以直接遍历,兼容map的数据结构
}

set中的keys和values方法

let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']);
console.log(st.size); // 3
let itKeys = st.keys();
for(let k of itKeys) {
   console.log(k); // 依次输出 xxx yyyy John
}
console.log('>>>>>');
let itVals = st.values();
for(let v of itVals) {
   console.log(v); // 依次输出 xxx yyyy John
}

set 的entries 实体对象,是个键和值的数组结构

let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']);
let entriesIt = st.entries(); //
for(let v of entriesIt) {
 console.log(v); // 依次输出 ["xxx", "xxx"] ["yyyy", "yyyy"] ["John", "John"]
}

关于NaN在set中的特殊性

let st = new Set();
console.log(NaN === NaN); // false , 此处 NaN 是不全等的,理应可以添加多个,不算重复,但是这里是个特例
st.add(NaN).add(NaN).add(NaN);
for(let v of st) {
 console.log(v); // 只输出一个 NaN
}

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

Javascript 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue.js实现备忘录demo
Jun 26 #Javascript
ES6 Map结构的应用实例分析
Jun 26 #Javascript
vue实现日历备忘录功能
Sep 24 #Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 #Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
You might like
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python封装原理与实现方法详解
2018/08/28 Python
python获取url的返回信息方法
2018/12/17 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
用python做游戏的细节详解
2019/06/25 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
我的中国梦演讲稿小学篇
2014/08/19 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
具结保证书
2015/01/17 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
学历证明样本
2015/06/16 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis