动态构建唯一标签数组的正确去重方法

本文深入探讨为什么在 map() 中直接操作原数组无法实现去重，并详细介绍如何利用 Set 高效构建唯一标签数组。同时提供可直接运行的代码示例及关键注意事项，帮助前端开发者避开常见陷阱。

前端开发中有一个非常常见的误区：使用 map() 方法进行数组去重，却发现根本不起作用。实际上，这个问题并不复杂，但背后的原理值得深入了解。

先来看一个典型的错误代码示例：

let resultArray = [];
resultArray = allRecipes.map(recipe => {
  const tag = recipe.tag;
  if (resultArray.includes(tag)) { // ❌ 始终为 false！
    // 跳过
  } else {
    return tag; // ✅ 每次都返回，导致重复项未被过滤
  }
});

问题究竟出在哪里？Array.prototype.map() 的设计本质是纯函数式遍历——它基于原始数组生成一个全新的数组，既不会修改原数组，也不会感知循环过程中对外部变量的任何更改。因此，当你在 map() 内部判断 resultArray.includes(tag) 时，resultArray 始终为空数组（或初始状态），includes() 自然永远返回 false。更重要的是，map() 返回的是由每次 return 值组成的新数组，而不是向 resultArray 追加元素——整个逻辑从起点就偏离了正确方向。

正确的解决方案其实非常直接：将“提取”与“去重”分开为两个步骤。推荐使用 Set 数据结构——它天然保证唯一性，插入操作平均时间复杂度为 O(1)，语义清晰易懂：

const getUniqueTags = async (req, res) => {
  try {
    const allRecipes = await Recipe.find({}).select("tag");
    // ✅ 第一步：提取所有 tag（可能含重复）
    const tags = allRecipes.map(recipe => recipe.tag);
    // ✅ 第二步：用 Set 自动去重，再转为数组
    const uniqueTags = [...new Set(tags)];
    console.log(uniqueTags); // 示例输出：[ 'Breakfast', 'Lunch', 'Dinner' ]
    res.status(200).json(uniqueTags);
  } catch (error) {
    console.error('Failed to fetch unique tags:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
};

以下是一些值得关注的细节：

• new Set(tags) 会自动忽略重复元素，并保留元素首次出现的顺序（ES2015+ 规范已明确保证）；
• 展开运算符 [...set] 是将 Set 转换为数组最简洁的方法，也可以使用 Array.from(set)；
• 如果需要兼容老环境（如 Internet Explorer），作为备选方案可以使用 filter() + indexOf()，但性能明显较差：

  const uniqueTags = tags.filter((tag, index) => tags.indexOf(tag) === index);

• 切勿在 map()、forEach() 等遍历方法中同步修改正在遍历的数组（或其引用），这很容易引发逻辑混乱且难以调试的副作用。

总结一下：数组去重本质上是一个“提取 → 归一化 → 输出”的数据转换流程，而不是“边遍历边判断边添加”的循环技巧。拥抱 Set，代码将更健壮、更易读、也更高效。