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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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中使用CURL获取页面title例子
2015/01/07 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python str与repr的区别
2013/03/23 Python
Python IDLE入门简介
2017/12/08 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python如何快速拼接字符串
2020/10/28 Python
精灵市场:Pixie Market
2019/06/18 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
初三物理教学反思
2014/01/21 职场文书
财务部经理岗位职责
2014/02/03 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
党性分析自查总结
2014/10/14 职场文书
研究生导师评语
2014/12/31 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
nginx内存池源码解析
2021/11/20 Servers
alibaba seata服务端具体实现
2022/02/24 Java/Android
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫