JS中的Set 核心认知

小李子呢02112026-03-18 16:03

1. Set基础用法

Set 是 ES6 新增的集合类型 ，核心特点是：存储唯一值（无重复元素），元素可以是任意类型（基本类型 / 引用类型），且遍历顺序与插入顺序一致。

你可以把它理解为：一个 "自动去重" 的数组 ，但没有下标（不能通过 [0] 取值），专门用于处理 "不重复值" 的场景（比如数组去重、判断元素是否存在）。

javascript 复制代码

// 创建 Set
const 集合 = new Set(可迭代对象); // 可迭代对象：数组、字符串等（可选，用于初始化）

// 核心方法
集合.add(值);       // 添加元素（重复添加无效）
集合.delete(值);    // 删除元素，成功返回true，失败返回false
集合.has(值);       // 判断元素是否存在，返回布尔值
集合.clear();       // 清空所有元素
集合.size;          // 获取元素个数（类似数组length，只读）

遍历 Set（无下标，三种常用方式）

javascript 复制代码

const s = new Set(['a', 'b', 'c']);

// 方式1：forEach（推荐，和数组forEach用法一致）
s.forEach((value) => {
  console.log(value); // a → b → c
});

// 方式2：for...of 遍历（直接遍历值）
for (const value of s) {
  console.log(value); // a → b → c
}

// 方式3：遍历 keys()/values()/entries()（Set的键和值相同）
for (const key of s.keys()) {
  console.log(key); // a → b → c
}
for (const [key, value] of s.entries()) {
  console.log(key, value); // a a → b b → c c
}

Set 与数组互转（最常用场景）

javascript 复制代码

// 1. Set 转数组（两种方式）
const s = new Set([1, 2, 3]);
const arr1 = Array.from(s); // [1,2,3]（推荐）
const arr2 = [...s];        // [1,2,3]（ES6扩展运算符，更简洁）

// 2. 数组去重（Set 核心用途）
const arr = [1,2,2,3,3,3];
const uniqueArr = [...new Set(arr)]; // [1,2,3]（一行实现数组去重）

Set vs 数组 vs Map（核心区别）

类型	核心特点	是否允许重复	是否有下标	常用场景
数组	有序集合	是	是	有序存储、按索引访问
Set	有序集合（插入顺序）	否	否	去重、判断元素是否存在
Map	键值对集合	键唯一，值可重复	否	存储键值映射