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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php图片验证码代码
2008/03/27 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
ini_set的用法介绍
2014/01/07 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
js实现简单进度条效果
2020/03/25 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
Python3处理HTTP请求的实例
2018/05/10 Python
Python3多线程操作简单示例
2018/05/22 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
给物业的表扬信
2014/01/21 职场文书
士力架广告词
2014/03/20 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
Redis 常见使用场景
2021/08/30 Redis
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
php访问对象中的成员的实例方法
2021/11/17 PHP