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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
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
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP简单生成缩略图相册的方法
2015/07/29 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery统计上传文件大小的方法
2015/01/24 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python中实现参数类型检查的简单方法
2015/04/21 Python
详解Python中类的定义与使用
2017/04/11 Python
在python里面运用多继承方法详解
2019/07/01 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
员工保密承诺书
2014/05/28 职场文书
授权收款委托书
2014/09/23 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书