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 相关文章推荐
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
$("").click与onclick的区别示例介绍
Sep 25 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
Vue slot用法(小结)
Oct 22 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JS异步宏队列微队列原理详解
Sep 09 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
php生成图片验证码的方法
2016/04/15 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
初识Javascript小结
2015/07/16 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
小学生检讨书大全
2014/02/06 职场文书
安全责任书范文
2014/08/25 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang