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 isArray 数组类型检测函数
Oct 08 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
javascript实现Table排序的方法
May 15 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
详解JavaScript中return的用法
May 08 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
浅谈JavaScript 声明提升
Sep 14 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 define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
简单实现php上传文件功能
2017/09/21 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
$("").click与onclick的区别示例介绍
2014/09/25 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
JS中数据结构之栈
2019/01/01 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
js实现计算器功能
2020/08/10 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python中的高级数据结构详解
2015/03/27 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python模块WSGI使用详解
2018/02/02 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
夜大自我鉴定
2013/10/31 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
行政处罚告知书
2015/07/01 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers