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 相关文章推荐
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
Zerg剧情介绍
2020/03/14 星际争霸
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python 专题一 函数的基础知识
2017/03/16 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
代码分析Python地图坐标转换
2018/02/08 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python reques接口测试框架实现代码
2020/07/28 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
MySQL面试题目集锦
2016/04/14 面试题
中学生差生评语
2014/01/30 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
死亡赔偿协议书
2015/01/28 职场文书
篮球赛新闻稿
2015/07/17 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python