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  THIS详解 面向对象
Mar 25 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
Layer弹出层动态获取数据的方法
Aug 20 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JS自定义滚动条效果
Mar 13 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代码实现爬虫记录――超管用
2015/07/31 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python Deque 模块使用详解
2014/07/04 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python版简单工厂模式
2017/10/16 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
中科创达面试题
2016/12/28 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
酒店公关部经理岗位职责
2013/11/24 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
团队会宣传标语
2014/10/09 职场文书
世界气象日活动总结
2015/02/27 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
Python实现批量自动整理文件
2022/03/16 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS