每天温习一个JS方法之Set 第七天

1.Set描述

1.1 简述

1. Set对象是值的集合，你可以按照插入的顺序迭代它的元素。

2. Set中元素只会出现一次，即Set中的元素是唯一的。

3. NaN和undefined都可以存储到Set中，NaN之间被视为相同的值

4. Set() 只能用 new 构建。试图在没有 new 的情况下调用它，会抛出 TypeError。

1.2 语法

new Set()
new Set(iterable)
1
2

参数：

• iterable:如果传递一个可迭代对象，它的所有元素将不重复地被添加到新的 Set 中。如果不指定此参数或其值为 null，则新的 Set 为空。若传递一个不可迭代对象，则会报TypeError错误

返回值：一个新的 Set 对象。

1.3 constructor构造函数

Set 构造函数能让你创建 Set 对象，其可以存储任意类型的唯一值，无论是基本类型或者对象引用。

const set = new Set('abca');
  console.log(set); // 输出 Set(3) {'a', 'b', 'c'}

  const set1 = new Set(new Set('abcd1'));
  console.log(set1); // 输出 Set(5) {'a', 'b', 'c', 'd', '1'}

  const set2 = new Set([1, 2, 3, 1]);
  console.log(set2); // 输出 Set(3) {1, 2, 3}

  const set3 = new Set([{ id: 1 }, { id: 2 }, { id: 1 }]);
  console.log(set3); // 输出 Set(3) {{…}, {…}, {…}} 并未过滤数组对象

  const set4 = new Set(
    new Map([
      ['id', 1],
      ['id', 1],
    ])
  );
  console.log(set4); // 输出 Set(1) {Array(2)}

  const set5 = Set(1, 2, 3, 1);
  console.log(set5); // 输出 Uncaught TypeError: Constructor Set requires 'new'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. Set的属性和方法

2.1 Set.prototype.size 属性

size 属性将会返回 Set 对象中（唯一的）元素的个数。

const set = new Set('abca');
console.log(set.size); // 输出 3
1
2

2.2 Set.prototype.add() 方法

如果 Set 对象中没有具有相同值的元素，则 add() 方法将插入一个具有指定值的新元素到 Set 对象中。并且add支持链式调用。

const set = new Set('abca');
set.add('d').add('a');
set.add(['a']);
console.log(set); // 输出 Set(5) {'a', 'b', 'c', 'd', Array(1)}
1
2
3
4

2.3 Set.prototype.has() 方法

has() 方法返回一个布尔值来指示对应的值是否存在于 Set 对象中。如果 Set 对象中存在具有指定值的元素，则返回 true；否则返回 false。

const set = new Set('abca');
console.log(set.has('a')); // 输出 true
console.log(set.has('ab'));// 输出 false

const set = new Set('abca');
const obj = { id: 1 };
set.add(obj);
console.log(set.has(obj)); // 输出 true
console.log(set.has({ id: 1 }));// 输出 false，因为它们是不同的对象引用
1
2
3
4
5
6
7
8
9

2.4 Set.prototype.values()方法

values() 方法返回一个新的迭代器对象，该对象按插入顺序包含 Set 对象中每个元素的值。

const set = new Set('abca');
const Iterator = set.values();
console.log(Iterator); // 输出 SetIterator {'a', 'b', 'c'}
console.log(Iterator.next()); // 输出 {value: 'a', done: false}
1
2
3
4

**迭代器：**在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。更具体地说，迭代器是通过使用 next() 方法实现 Iterator protocol 的任何一个对象，该方法返回具有两个属性的对象： value，这是序列中的 next 值；和 done ，如果已经迭代到序列中的最后一个值，则它为 true 。如果 value 和 done 一起存在，则它是迭代器的返回值。

2.5 Set.prototype.keys()方法

keys() 方法是 values() 方法的别名。

const set = new Set('abca');
const Iterator = set.keys();
console.log(Iterator); // 输出 SetIterator {'a', 'b', 'c'}
console.log(Iterator.next()); // 输出 {value: 'a', done: false}
1
2
3
4

2.6 Set.prototype.delete()方法

delete() 方法从 Set 对象中删除指定的值（如果该值在 Set 中）。成功删除返回 true，否则返回 false。

const set = new Set('abca');
console.log(set.delete('a')); // 输出 true
console.log(set.delete('f')); // 输出 false
1
2
3

2.7 Set.prototype.clear()方法

clear() 方法移除 Set 对象中所有元素。无返回值。

const set = new Set('abca');
set.clear();
console.log(set); // 输出 Set(0) {size: 0}
1
2
3

2.8 Set.prototype.forEach()方法

forEach() 方法对 Set 对象中实际存在的每个值执行一次提供的 callback。对于已删除的值，不会调用它。但是，它会对存在但值为 undefined 的值执行。它的返回值是undefined。

callback接收三个参数（value,key,set）：

• value: 当前处理元素值
• key:因为Set没有键，所以key = value
• set:调用forEach()的Set对象

const set = new Set('abca');
set.forEach((val, key, set) => {
  console.log(val, key, set); // 依次输出 a a Set(3) {'a', 'b', 'c'}，b b Set(3) {'a', 'b', 'c'}，c c Set(3) {'a', 'b', 'c'}
});
1
2
3
4

每个值都访问一次，除非在 forEach() 完成之前删除并重新添加它。在访问之前删除的值不会调用 callback。在 forEach() 完成之前添加的新值将被访问。

const set = new Set('abca');
set.forEach((val) => {
  if (val == 'a') {
    set.add('d');
  }
  console.log(val); // 依次输出 a, b, c, d
});
1
2
3
4
5
6
7

2.9 Set.prototype.entries() 方法

返回一个新的迭代器对象，它包含给定 Set 中的每个元素的 [value, value] 数组，按插入顺序排列。

const set = new Set('abca');
for (const iterator of set.entries()) {
  console.log(iterator); // 依次输出 ['a', 'a']，['b', 'b']，['c', 'c']
}
1
2
3
4

3. Set的应用

3.1 数组的去重

const arr = [1, 2, 3, 4, 1, 2, 3];
const newArr = [...new Set(arr)];
console.log(newArr); // 输出 [1, 2, 3, 4]
1
2
3

3.2 数组与Set的互转

const set = new Set('abcd');
const setToarr = Array.from(set);
console.log(setToarr); // 输出 ['a', 'b', 'c', 'd']

const arrToset = new Set(setToarr);
console.log(arrToset); // 输出 Set(4) {'a', 'b', 'c', 'd'}
1
2
3
4
5
6

Set 还有诸多与其它方法联用的应用，熟悉它，相信你在逻辑处理过程中能够广泛应用到