Javascript ES6中对象类型Sets的介绍与使用详解


Posted in Javascript onJuly 17, 2017

介绍

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

Sets 是ES6(ES2015)中一个新的对象类型,用来创建一系列唯一值的集合。集合中的值可以是简单的原始类型如字符串(strings)或整数(integers),也可以是更复杂的对象类型如对象字面量或者数组。

基本方法

下面是基本的set及其方法(add, size, has, forEach, delete, clear)的简单示例:

let animals = new Set();

animals.add('?');
animals.add('?');
animals.add('?');
animals.add('?');
console.log(animals.size); // 4
animals.add('?');
console.log(animals.size); // 4

console.log(animals.has('?')); // true
animals.delete('?');
console.log(animals.has('?')); // false

animals.forEach(animal => {
 console.log(`Hey ${animal}!`);
});

// Hey ?!
// Hey ?!
// Hey ?!

animals.clear();
console.log(animals.size); // 0

初始化

下面是另一个将数组作为初始值传进set的示例。需要主要的是初始化的数组是如何被解构的,但是随后添加的数组将以数组的形式存在:

let myAnimals = new Set(['?', '?', '?', '?']);

myAnimals.add(['?', '?']);
myAnimals.add({ name: 'Rud', type: '?' });
console.log(myAnimals.size); // 4

myAnimals.forEach(animal => {
 console.log(animal);
});


// ?
// ?
// ["?", "?"]
// Object { name: "Rud", type: "?" }

字符串也是一个有效的迭代,所以也可以被传入来初始化一个set:

console.log('Only unique characters will be in this set.'.length); // 43

let sentence = new Set('Only unique characters will be in this set.');
console.log(sentence.size); // 18

For...of遍历

除了在一个set上可以使用forEach外,for...of循环也可以被用来遍历sets:

let moreAnimals = new Set(['?', '?', '?', '?']);

for (let animal of moreAnimals) {
 console.log(`Howdy ${ animal }`);
}

// Howdy ?
// Howdy ?
// Howdy ?
// Howdy ?

Keys 和 Values

Sets也有keys和values方法,由于keys是values的别名,所以两个方法其实是完成一样的事情。使用两者中的任何一个方法都会返回一个新的可迭代的对象,该对象的值与添加到集合中的顺序相同。

let partyItems = new Set(['?', '?', '?']);
let items = partyItems.values();

console.log(items.next());
console.log(items.next());
console.log(items.next());
console.log(items.next().done);

// Object {
// done: false,
// value: "?"
// }

// Object {
// done: false,
// value: "?"
// }

// Object {
// done: false,
// value: "?"
// }

// true

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

注:

原文: Introduction to Sets in JavaScript

作者: alligatorio

译者:smallbone

译文地址:https://alligator.io//js/sets-introduction/

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
React服务端渲染(总结)
Jul 01 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
js实现图片懒加载效果
Jul 17 #Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 #Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 #Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 #Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 #Javascript
node.js express中app.param的用法详解
Jul 16 #Javascript
Node.js中流(stream)的使用方法示例
Jul 16 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
逐步提升php框架的性能
2008/01/10 PHP
php array的学习笔记
2012/05/10 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
使用Python的turtle模块画国旗
2019/09/24 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python ETL工具 pyetl
2020/06/07 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
计算机专业自荐信范文
2014/05/28 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
公司董事长岗位职责
2014/06/08 职场文书
公司年终奖分配方案
2014/06/16 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
教育合作协议范本
2014/10/17 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技