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 attachEvent传递参数的办法
Dec 14 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
jsonp跨域请求详解
Jul 13 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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 接口类与抽象类的实际作用
2009/11/26 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
php数组键值用法实例分析
2015/02/27 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python统计中文字符数量的两种方法
2019/01/31 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Django用户认证系统 User对象解析
2019/08/02 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
医学生自我评价
2014/01/27 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android