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之解决IE下不渲染的bug
Jun 29 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
javascript的理解及经典案例分析
May 20 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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基础知识:类与对象(1)
2006/12/13 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python+logging+yaml实现日志分割
2019/07/22 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
网上开店必备创业计划书
2014/01/26 职场文书
申论倡议书范文
2014/05/13 职场文书
优秀毕业生求职信
2014/06/05 职场文书
防灾减灾活动总结
2014/08/30 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
大学生毕业个人总结
2015/02/15 职场文书
建国大业观后感800字
2015/06/01 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android