ES6 set介绍和用法详解

本文概述

设置属性
设定方法
弱集
迭代器

集合是一种数据结构, 可让你创建唯一值的集合。集是处理单个对象或单个值的集合。
Set是类似于数组的值的集合, 但不包含任何重复项。它使我们可以存储唯一值。它支持原始值和对象引用。
与映射相似, 集合也被排序, 即集合中的元素按其插入顺序进行迭代。它返回设置的对象。
语法

var s = new Set("val1", "val2", "val3");

让我们通过使用以下示例来理解集合的概念：
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); console.log(colors);

集合的所有元素必须唯一。因此, 以上示例中的设置颜色仅包含四个不同的元素。成功执行以上代码后, 我们将获得以下输出。
输出如下

Set { 'Green', 'Red', 'Orange', 'Yellow' }

让我们看一下Set的属性和方法。
设置属性

S.no.	属性	描述
1.	设定尺寸	此属性返回设置对象中值的数量。

设定尺寸
Set对象的此属性返回表示Set对象中元素数量的值。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); console.log(colors.size); console.log(colors);

输出如下

4Set { 'Green', 'Red', 'Orange', 'Yellow' }

设定方法set对象包括几种方法, 其列表如下：

S.no.	方法	描述
1.	Set.prototype.add(值)	它将新元素附加到set对象的给定值。
2.	Set.prototype.clear()	它从设置的对象中删除所有元素。
3.	Set.prototype.delete(值)	它删除与相应值关联的元素。
4.	Set.prototype.entries()	它返回一个新的迭代器对象, 该对象包含按插入顺序的Set对象中每个元素的数组。
5.	Set.prototype.forEach(callbackFn [, thisArg])	它执行一次回调函数。
6.	Set.prototype.has(值)	当传递的值在Set中时, 此方法返回true。
7.	Set.prototype.values()	它以插入顺序返回新的迭代器对象, 该对象包含Set中每个元素的值。

现在, 我们将详细了解Set对象的上述方法。
Set.prototype.add(值)
此方法用于将具有现有值的新元素追加到Set对象。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); colors.add('Indigo'); colors.add('Blue'); colors.add('Violet'); console.log(colors.size); console.log(colors);

输出如下

7Set { 'Green', 'Red', 'Orange', 'Yellow', 'Violet', 'Indigo', 'Blue' }

Set.prototype.clear()
它将清除集合中的所有对象。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); colors.add('Indigo'); colors.add('Blue'); colors.add('Violet'); colors.clear()console.log(colors.size);

输出如下

0

Set.prototype.delete(值)
此方法用于从set对象中删除相应的传递值。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); colors.add('Indigo'); colors.add('Blue'); colors.add('Violet'); colors.delete('Violet'); console.log(colors.size); console.log(colors);

输出如下

6Set { 'Green', 'Red', 'Orange', 'Yellow', 'Indigo', 'Blue' }

Set.prototype.entries()
它返回一个新的集合迭代器的对象。它包含每个元素的值的数组。它保持插入顺序。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); colors.add('Indigo'); colors.add('Blue'); colors.add('Violet'); var itr = colors.entries(); for(i=0; i< colors.size; i++){console.log(itr.next().value); }

输出如下

[ 'Green', 'Green' ][ 'Red', 'Red' ][ 'Orange', 'Orange' ][ 'Yellow', 'Yellow' ][ 'Violet', 'Violet' ][ 'Indigo', 'Indigo' ][ 'Blue', 'Blue' ]

Set.prototype.forEach(callbackFn [, thisArg])
它为每个Map条目执行一次指定的回调函数。
【ES6 set介绍和用法详解】例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); colors.add('Indigo'); colors.add('Blue'); colors.add('Violet'); function details(values){console.log(values); }colors.forEach(details);

输出如下

GreenRedOrangeYellowVioletIndigoBlue

Set.prototype.has(值)
它返回一个布尔值, 该值指示元素以及相应的值在Set对象中是否存在。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); colors.add('Indigo'); colors.add('Blue'); colors.add('Violet'); console.log(colors.has('Indigo')); console.log(colors.has('Violet')); console.log(colors.has('Cyan'));

输出如下

truetruefalse

Set.prototype.values()
它返回一个新的迭代器对象, 该对象包含按插入顺序设置的Set对象中每个元素的值。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); colors.add('Violet'); var val = colors.values(); console.log(val.next().value); console.log(val.next().value); console.log(val.next().value); console.log(val.next().value); console.log(val.next().value);

输出如下

GreenRedOrangeYellowViolet

弱集它用于存储对象的集合。它类似于Set对象, 因此它也不能存储重复值。与弱映射相似, 弱集合不能被迭代。弱集只能包含可能被垃圾回收的对象。
弱集合仅包括Set对象的add(value), delete(value)和has(value)方法。
例子

'use strict' let ws = new WeakSet(); let obj = {msg:"Welcome Back!"}; ws.add(obj); console.log(ws.has(obj)); ws.delete(obj); console.log(ws.has(obj));

输出如下

truefalse

迭代器迭代器是一个对象, 它定义序列和终止时的返回值。它允许一次访问一组对象。 Set和Map都包含返回迭代器的方法。
迭代器是具有next()方法的对象。当next()方法被调用时, 迭代器将返回一个对象以及’ value’ 和’ done’ 属性。
‘ done’ 是一个布尔值, 在读取集合中的所有元素后返回true。否则, 它返回false。
让我们一起了解Iterator和Set对象的实现。
例子

let colors = new Set(['Green', 'Red', 'Orange', 'Yellow', 'Red']); var itr = colors.keys(); var itr1 = colors.entries(); var itr2 = colors.values(); console.log(itr.next()); console.log(itr1.next()); console.log(itr2.next());

输出如下