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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
理解JS绑定事件
2016/01/19 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python实现学生通讯录管理系统
2021/02/25 Python
体育运动会广播稿
2014/10/05 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis