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 相关文章推荐
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
浅谈js的异步执行
Oct 18 Javascript
微信小程序 video组件详解
Oct 25 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
JS class语法糖的深入剖析
Jul 07 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
django基础学习之send_mail功能
2019/08/07 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
新春寄语大全
2014/04/09 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年化验员工作总结
2014/11/18 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
关于python中模块和重载的问题
2021/11/02 Python