本文详解为何在 map() 中直接修改原数组无法实现去重，以及如何利用 Set 高效获取唯一标签数组，并提供可直接运行的代码示例与关键注意事项。
本文详解为何在 `map()` 中直接修改原数组无法实现去重，以及如何利用 `set` 高效获取唯一标签数组，并提供可直接运行的代码示例与关键注意事项。
在 JavaScript 中，Array.prototype.map() 的核心语义是纯函数式遍历：它基于原始数组生成一个全新数组，而不会修改原数组，也不会感知循环过程中对原数组的任何变更。因此，在你原始代码中：
let resultArray = [];
resultArray = allRecipes.map(recipe => {
const tag = recipe.tag;
if (resultArray.includes(tag)) { // ❌ 始终为 false！
// 跳过
} else {
return tag; // ✅ 每次都返回，导致重复项未被过滤
}
});
问题根源在于：map() 执行时 resultArray 仍是空数组（或初始状态），includes() 检查永远失败；同时 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)；
- 若需兼容旧环境（如 IE），可改用 filter() + indexOf()，但性能显著低于 Set：
const uniqueTags = tags.filter((tag, index) => tags.indexOf(tag) === index);
- 切勿在 map()、forEach() 等遍历中同步修改正在遍历的数组（或其引用），易引发逻辑混乱与难以调试的副作用。
总结：去重不是“边遍历边判断边添加”的过程，而是“提取 → 归一化 → 输出”的数据转换流程。拥抱 Set，让代码更健壮、更易读、更高效。
