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 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
cakephp常见知识点汇总
2017/02/24 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python创建和删除目录的方法
2015/04/29 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
单位介绍信范文
2014/01/18 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
军训通讯稿范文
2015/07/18 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Golang实现AES对称加密的过程详解
2021/05/20 Golang
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers