探索 ES6 Set：用法与实战

news/2025/1/8 19:01:25/

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

ES6（ECMAScript 2015）引入了Set，这是一种新的数据结构，用于存储唯一的值，无论是原始值还是对象引用。Set的出现，为处理一组唯一值的需求提供了便利。本文将详细介绍Set的用法和实战技巧。

创建 Set

创建一个空的Set实例非常简单，只需使用new Set()构造函数：

let mySet = new Set();

你也可以在创建时就初始化一些值：

let mySet = new Set([1, 2, 3, 4, 5]);

Set 的基本操作

添加值

使用add方法可以向Set中添加新的值：

mySet.add(6);

检查值是否存在

使用has方法可以检查某个值是否存在于Set中：

console.log(mySet.has(3)); // 输出: true
console.log(mySet.has(7)); // 输出: false

删除值

使用delete方法可以删除指定的值：

mySet.delete(5);
console.log(mySet.has(5)); // 输出: false

获取 Set 的大小

使用size属性可以获取Set中的值的数量：

console.log(mySet.size); // 输出: 5

清空 Set

使用clear方法可以清空Set中的所有值：

mySet.clear();
console.log(mySet.size); // 输出: 0

遍历 Set

Set实例是可迭代的，因此可以使用for...of循环或者forEach方法来遍历它。

使用 for…of 循环

for...of循环可以遍历Set中的值：

for (let value of mySet) {console.log(value);
}

使用 forEach 方法

forEach方法也可以遍历Set中的值：

mySet.forEach((value) => {console.log(value);
});

Set 的实际应用

Set在许多实际应用场景中都非常有用。例如，它可以用于去除数组中的重复元素，或者存储用户在网页上点击的按钮。

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = new Set(numbers);
let resultArray = [...uniqueNumbers];
console.log(resultArray); // 输出: [1, 2, 3, 4, 5]