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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
Jquery判断$("#id")获取的对象是否存在的方法
Sep 25 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php短址转换实现方法
2015/02/25 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
微信小程序分页加载的实例代码
2017/07/11 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
django框架两个使用模板实例
2019/12/11 Python
python中线程和进程有何区别
2020/06/17 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
浅析Python 条件控制语句
2020/07/15 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
学校司机岗位职责
2013/11/14 职场文书
小学运动会表扬稿
2014/01/19 职场文书
大学信息公开实施方案
2014/03/09 职场文书
网站美工岗位职责
2014/04/02 职场文书
校庆标语集锦
2014/06/25 职场文书
会议欢迎标语
2014/06/30 职场文书
2014年教师节寄语
2014/08/11 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
2016公司新年问候语
2015/11/11 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS