前端开发必学：用Set提升代码性能

前端开发必学：用Set提升代码性能

引用

CSDN

等

9

来源

1.

https://blog.csdn.net/zzyp1927314/article/details/139881608

2.

https://blog.csdn.net/m0_73531461/article/details/140718665

3.

https://blog.csdn.net/qq_41865545/article/details/143502905

4.

https://blog.csdn.net/qq_41767061/article/details/139774368

5.

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Set

6.

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Set/add

7.

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Set/clear

8.

https://www.cnblogs.com/apocelipes/p/18502063

9.

https://developer.aliyun.com/article/1451810

在前端开发中，JavaScript的Set数据结构因其独特的特性和优势，成为了提升代码性能的重要工具。本文将从Set的基本概念出发，深入探讨其在前端开发中的具体应用，以及相比传统数组操作的优势。

Set是ES6引入的一种新的数据结构，类似于数组，但其成员是唯一的，不允许重复。Set本身是一个构造函数，用于生成Set数据结构。以下是Set的一些基本用法：

let mySet = new Set();

mySet.add(1);          // 添加元素
mySet.add(5);
mySet.add(5);          // 重复元素不会被添加
console.log(mySet);    // Set(2) {1, 5}

mySet.delete(5);       // 删除元素
console.log(mySet.has(5)); // false，检查元素是否存在

mySet.clear();         // 清空所有元素
console.log(mySet.size);   // 0，获取元素数量

Set支持多种遍历方式，包括keys()、values()、entries()和forEach()等。这些特性使得Set在处理唯一值集合时非常方便。

虽然数组是JavaScript中最常用的数据结构，但在某些场景下，Set的性能优势明显。以下是一个简单的性能测试，比较了数组和Set在插入和遍历操作中的表现：

const time = 1000000;
const arr = [];
const set = new Set();

console.time('数组插入');
for (let i = 0; i < time; i++) {
    arr.push(i);
}
console.timeEnd('数组插入');

console.time('Set插入');
for (let i = 0; i < time; i++) {
    set.add(i);
}
console.timeEnd('Set插入');

console.time('数组遍历');
for (let i = 0; i < arr.length; i++) {
    arr[i];
}
console.timeEnd('数组遍历');

console.time('Set遍历');
for (let value of set) {}
console.timeEnd('Set遍历');

测试结果显示，在插入操作中，数组的性能略优于Set；但在遍历操作中，Set的性能显著优于数组。特别是在处理大量数据时，Set的优势更加明显。

Set在前端开发中有着广泛的应用场景，其中最常见的是数组去重。传统的数组去重方法通常需要使用嵌套循环或额外的哈希表，效率较低。而使用Set可以轻松实现去重：

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

除了数组去重，Set还可以用于字符串去重：

let str = "352255";
let uniqueStr = [...new Set(str)].join("");
console.log(uniqueStr); // "352"

对于对象数组的去重，虽然Set本身无法直接去重，但可以通过JSON序列化和反序列化的方式实现：

let list = [
    { name: "张三", age: 18, address: "北京" },
    { name: "李四", age: 20, address: "天津" },
    { name: "张三", age: 18, address: "北京" }
];

let uniqueList = [...new Set(list.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
console.log(uniqueList);
// [{ name: "张三", age: 18, address: "北京" }, { name: "李四", age: 20, address: "天津" }]

此外，Set还可以用于实现集合的并集、交集和差集等操作，这些在数据处理中都非常有用。

Set作为JavaScript中的一种重要数据结构，以其唯一性、高效性等特点，在前端开发中发挥着重要作用。特别是在处理大量数据时，Set相比传统数组操作具有明显优势。掌握Set的使用方法，可以有效提升代码性能，让开发工作更加高效。