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 相关文章推荐
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vue filters的使用详解
Jun 11 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
Rust中的Struct使用示例详解
Aug 14 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
初级的用php写的采集程序
2007/03/16 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
BootStrap导航栏问题记录
2017/07/31 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python Django使用forms来实现评论功能
2016/08/17 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
pandas删除指定行详解
2019/04/04 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
python操作toml文件的示例代码
2020/11/27 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
模具专业自荐信
2014/05/29 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年党委工作总结
2014/11/22 职场文书
西湖英语导游词
2015/02/06 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
MySQL创建管理子分区
2022/04/13 MySQL
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers