如何使用Set的add()方法添加元素？

在 JavaScript 中，Set 对象的 add() 方法用于向集合中添加新元素。以下是关于如何正确使用 add() 方法的详细指南：

一、基本语法与参数

set.add(value);

• 参数：value 是要添加到 Set 中的元素值，可以是任意类型。
• 返回值：返回 Set 对象本身，因此可以链式调用多个 add() 方法。
• 特性：
  • 唯一性：Set 中的元素不可重复，若添加已存在的值，Set 不会发生变化。
  • 顺序性：元素按添加顺序排列，遍历时保持此顺序。

二、添加基本类型元素

const set = new Set();

// 添加单个元素
set.add(1);
set.add("hello");
set.add(true);

// 链式添加多个元素
set.add(2).add("world").add(null);

console.log([...set]); // [1, "hello", true, 2, "world", null]

// 添加重复元素（无效操作）
set.add(1);
console.log([...set]); // 仍为 [1, "hello", true, 2, "world", null]

三、添加对象或数组元素

由于 Set 基于引用相等性判断元素是否重复，即使对象内容相同，不同引用也会被视为不同元素：

const set = new Set();

// 添加对象
const obj1 = {
    id: 1 };
const obj2 = {
    id: 1 }; // 内容相同，但引用不同

set.add(obj1);
set.add(obj2);

console.log([...set]); // [ { id: 1 }, { id: 1 } ]（两个不同对象）

// 添加相同引用的对象（无效操作）
set.add(obj1);
console.log([...set]); // 仍为 [ { id: 1 }, { id: 1 } ]

四、添加特殊值

Set 能正确处理特殊值（如 NaN、undefined）：

const set = new Set();

set.add(NaN);
set.add(undefined);

console.log([...set]); // [NaN, undefined]

// 注意：NaN 与自身的严格比较（NaN === NaN）为 false，但 Set 视其为重复值
set.add(NaN);
console.log([...set]); // 仍为 [NaN, undefined]

五、批量添加元素的方法

1. 通过数组初始化 Set

const array = [1, 2, 3, 4];
const set = new Set(array); // 直接将数组元素添加到 Set

console.log([...set]); // [1, 2, 3, 4]

2. 遍历添加多个元素

const set = new Set();
const values = [1, 2, "a", "b"];

values.forEach(value => set.add(value));
console.log([...set]); // [1, 2, "a", "b"]

六、常见错误与注意事项

1. 区分值类型与引用类型

   • 添加对象时，确保引用相同才会被视为重复元素。

     const obj = {
             key: "value" };
     const set = new Set([obj]);
     set.add({
             key: "value" }); // 新对象，引用不同，添加成功
     console.log([...set]); // [ { key: "value" }, { key: "value" } ]
     

2. 链式调用的返回值
   add() 返回 Set 本身，可用于连续添加：

   set.add(1).add(2).add(3);
   

3. 添加元素的顺序性
   Set 遍历时按元素添加顺序返回，可利用此特性维护有序集合：

   const set = new Set();
   set.add(3).add(1).add(2);
   console.log([...set]); // [3, 1, 2]（保持添加顺序）
   

七、应用场景示例

1. 数组去重

const arrayWithDuplicates = [1, 2, 2, 3, 3, 3];
const uniqueArray = [...new Set(arrayWithDuplicates)];

console.log(uniqueArray); // [1, 2, 3]

2. 维护黑名单/白名单

const blockedUsers = new Set();

// 添加黑名单用户
blockedUsers.add("spammer1").add("spammer2");

// 检查用户是否在黑名单中
console.log(blockedUsers.has("spammer1")); // true

3. 合并多个数组的唯一元素

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const mergedUnique = [...new Set([...arr1, ...arr2])];

console.log(mergedUnique); // [1, 2, 3, 4, 5]

八、总结：安全添加元素的最佳实践

1. 利用唯一性特性：
   若需确保集合中元素不重复，直接使用 add() 即可自动过滤重复值。

2. 处理对象元素：

   • 若需按内容而非引用判断重复，可先通过其他方式（如 JSON.stringify()）转换为字符串，再添加到 Set。
   • 或使用 Map 存储对象与标识的映射关系。

3. 批量操作：
   优先通过数组初始化 Set 或遍历添加，避免逐个手动调用 add()。

通过合理使用 add() 方法，可高效管理 Set 中的唯一元素集合，同时避免因引用混淆或重复添加导致的问题。