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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
create-react-app安装出错问题解决方法
Sep 04 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP完整的日历类(CLASS)
2006/11/27 PHP
PHP一些有意思的小区别
2006/12/06 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
jQuery cdn使用介绍
2013/05/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
微信小程序提交form操作示例
2018/12/30 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
python找出完数的方法
2018/11/12 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
幼教求职信
2014/03/12 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android