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 相关文章推荐
点击进行复制的JS代码实例
Aug 23 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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/06/01 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
2017/05/12 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python判断设备是否联网的方法
2018/06/29 Python
python3.6实现学生信息管理系统
2019/02/21 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
乌鸦喝水教学反思
2014/02/07 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
天地会口号
2014/06/17 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
小学少先队活动总结
2015/05/08 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
vue的项目如何打包上线
2022/04/13 Vue.js
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电