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.post用法关于type设置问题补充
Jan 03 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
Python运算符重载用法实例
2015/05/28 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
好的自荐信的要求
2013/10/30 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
办理居住证介绍信
2014/01/15 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2014年行政工作总结
2014/11/19 职场文书
升学宴答谢词
2015/01/05 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书