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程序中美元符号$是什么
Jun 05 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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服务器页面间跳转实现方法
2012/08/02 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
网页javascript精华代码集
2007/01/24 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python3.x上post发送json数据
2018/03/04 Python
python队列queue模块详解
2018/04/27 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python多线程同步实例教程
2019/08/11 Python
python3.6编写的单元测试示例
2019/08/17 Python
python多线程同步之文件读写控制
2021/02/25 Python
python实现IOU计算案例
2020/04/12 Python
Python中生成ndarray实例讲解
2021/02/22 Python
PHP如何自定义函数
2016/09/16 面试题
linux面试题参考答案(6)
2016/06/23 面试题
普罗米修斯教学反思
2014/02/06 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
重阳节标语大全
2014/10/07 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS