本文深入探讨为什么在 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，代码将更健壮、更易读、也更高效。
