如何使用 ES6 的 Set 对象去重-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数据进行去重操作。在 ES6 中，引入了 Set 对象，可以更方便地进行去重操作。本文将详细介绍如何使用 ES6 的 Set 对象进行去重，同时给出相应的示例代码和实际应用场景。

Set 对象简介

Set 对象是 ES6 新增的数据结构，它类似于数组，但是成员的值唯一，没有重复的值。Set 对象本身是一个构造函数，可以使用 new 关键字来创建实例。例如：

let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
console.log(mySet); // Set {1, 2, 3}

Set 对象的常见方法

Set 对象提供了以下常见方法：

add(value)：向 Set 对象中添加一个值，返回 Set 对象本身。
has(value)：返回一个布尔值，表示 Set 对象中是否包含该值。
delete(value)：删除 Set 对象中指定的值，返回一个布尔值，表示删除成功或失败。
clear()：清空 Set 对象中所有的值。
size：返回 Set 对象中的成员数量。

Set 对象实现去重

Set 对象中的成员值唯一，可以通过 Set 对象间接实现数组去重。例如：

let arr = [1, 2, 2, 3, 3, 3];
let newArr = [...new Set(arr)];
console.log(newArr); // [1, 2, 3]

这里通过 ... 展开运算符将 Set 对象转换成数组，然后得到去重后的新数组。

Set 对象优化对象去重

数组去重只是 Set 对象的一个应用场景，Set 对象还可以优化对象去重。例如，我们有以下两个对象：

let obj1 = {name: '张三', age: 18};
let obj2 = {name: '李四', age: 20};
let obj3 = {name: '张三', age: 18};

我们想要将它们去重。如果使用数组去重方法，需要先将对象转为字符串，然后对字符串数组去重，最后再转回对象。这里我们可以使用 Set 对象来避免多余的转换步骤。具体操作如下：

let objSet = new Set();
objSet.add(obj1);
objSet.add(obj2);
objSet.add(obj3);
console.log([...objSet]); // [{name: '张三', age: 18}, {name: '李四', age: 20}]

这里直接将对象添加到 Set 对象中，Set 对象根据对象的特征自动进行去重，最后通过 ... 展开运算符将去重后的对象集合转成数组。

实际应用场景

除了对象去重外，Set 对象还有其他的实际应用场景。

数组去重

前面我们已经介绍了用 Set 对象实现数组去重的方法，这里再举一个具体的实例。假如有一个数字数组，需要实现去重操作，同时将数组按照从大到小的顺序进行排序，代码如下：

let arr = [2, 5, 2, 7, 6, 1, 1];
let newArr = [...new Set(arr)].sort((a, b) => b - a);
console.log(newArr); // [7, 6, 5, 2, 1]

这里使用 Set 对象实现数组去重，然后通过 sort() 方法将数组排序。

统计字符出现次数

Set 对象也可以帮助我们统计字符串中每个字符出现的次数。代码如下：

let str = 'A brief history of time';
let charSet = new Set(str);
for (let char of charSet) {
    let regExp = new RegExp(char, 'g');
    let count = str.match(regExp).length;
    console.log(`${char}:${count}`);
}

这里首先将字符串转换成 Set 对象，然后遍历 Set 对象中的每个字符，在字符串中通过正则表达式统计出现次数。

总结

Set 对象可以帮助我们更方便地进行去重操作。无论是数组去重还是对象去重，都可以通过 Set 对象来实现，同时还有其他实际应用场景，如排序和字符出现次数统计。在日常前端开发中，掌握 Set 对象的用法对于提升开发效率是非常有帮助的。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65b8a5bfadd4f0e0ff1397ad