前端new Set()用法

331 阅读2分钟

Set是JavaScript中内置的一个对象类型,用于存储唯一值(不允许重复)。它的一些主要特点如下:

  1. 唯一性:在Set对象中,相同的值不会被添加多次,因为Set中的值总是唯一的。
  2. 自动去重:当你向Set中加入值时,如果该值已经存在于Set中,则不会再次被加入。
  3. 值的类型:Set中不仅可以存储基本类型的值(如字符串、数字等),也可以存储引用类型的值(如对象或数组)。
  4. 添加顺序:Set中值的存储是按添加顺序,所以你可以按照元素被添加的顺序来对它们进行迭代操作。

一些Set的常用方法有:

  • add(value):向Set中添加一个新的项。
  • delete(value):删除Set中的元素。
  • has(value):返回一个布尔值,表示该值在Set中是否存在。
  • clear():移除Set对象内的所有元素。
  • size:返回Set对象中值的个数。

以下是一个Set的简单示例:

const mySet = new Set();

mySet.add(1);
mySet.add(5);
mySet.add("some text");

const o = { a: 1, b: 2 };
mySet.add(o);

mySet.add({ a: 1, b: 2 }); // 注意,即使对象的内容相同,但不是同一个引用,即认为它们是两个不同的值

console.log(mySet.has(1)); // 输出 true
console.log(mySet.has(3)); // 输出 false
console.log(mySet.size); // 输出 4,因为有四个不同的值

mySet.delete(5); // 删除值 5
console.log(mySet.size); // 输出 3,现在只剩下三个值

mySet.clear(); // 清空整个 Set
console.log(mySet.size); // 输出 0

再举一个与数组去重相关的例子:

const numbers = [2, 3, 4, 2, 3, 5, 5];
const uniqueNumbers = new Set(numbers);

console.log(uniqueNumbers); // Set {2, 3, 4, 5}
console.log([...uniqueNumbers]); // [2, 3, 4, 5] 通过扩展运算符转换为数组

在这个数组去重的例子中,我们用Set来移除numbers数组中的重复项,并用扩展运算符...将结果转换成数组形式。这是Set一个常见且有用的使用场景。