如何将数组对象中重复的 name 字段值替换为空字符串-js教程-PHP中文网

如何将数组对象中重复的 name 字段值替换为空字符串

本文介绍如何遍历对象数组，对重复出现的 name 字段（基于首次出现判定）后续所有重复项设为空字符串 ''，并保持原数组结构不变，使用 Set 高效去重标记。

本文介绍如何遍历对象数组，对重复出现的 `name` 字段（基于首次出现判定）后续所有重复项设为空字符串 `''`，并保持原数组结构不变，使用 set 高效去重标记。

在处理前端数据展示（如表格、列表）时，常需对连续或非连续重复的字段进行“去重可视化”——即仅保留首次出现的值，后续重复项显示为空，以提升可读性。本教程提供一种简洁、高效且不可变（immutable）的实现方式：利用 Array.prototype.map() 配合 Set 实时追踪已出现的 name 值。

✅ 核心思路

使用 Set 存储已见过的 name 值（支持 null、undefined 和字符串，注意：Set 中 null 与 'null' 不同，此处原始数据含 type: null 但 name 均为字符串，故无需特殊处理）；
map() 遍历时，若当前元素的 name 已存在于 Set 中，则返回新对象，将 name 置为空字符串 ''；
否则，将该 name 加入 Set，并原样返回该对象（推荐使用展开语法 {...el} 确保不修改原对象）。

? 完整示例代码

const arr = [
  { type: 'F', name: 'Fun Box', age: 12 },
  { type: 'X', name: 'X Box', age: 13 },
  { type: 'X', name: 'X Box', age: 14 },
  { type: 'X', name: 'X Box Test', age: 15 },
  { type: 'B', name: 'Best Box', age: 16 },
  { type: 'B', name: 'Best Box Test', age: 15 },
  { type: 'B', name: 'Best Box', age: 17 },
  { type: null, name: 'Box One', age: 18 }
];

const seenNames = new Set();
const resultArr = arr.map(el => {
  if (seenNames.has(el.name)) {
    return { ...el, name: '' };
  }
  seenNames.add(el.name);
  return el;
});

console.log(resultArr);
// 输出符合预期：重复的 'X Box' 和 'Best Box' 第二次及以后出现时 name 为空字符串

⚠️ 注意事项

严格相等判断：Set.prototype.has() 使用 Object.is() 语义，因此 'X Box' 与 'X Box '（尾部空格）视为不同值。如需忽略空格或大小写，请先标准化 el.name.trim().toLowerCase() 再存入/查询 Set；
仅针对 name 字段：本方案聚焦于 name 去重。若需按 type + name 联合去重，可改为 seenNames.has(${el.type}|${el.name})；
不可变性保障：使用 {...el, name: ''} 创建新对象，避免意外修改原始数组，符合函数式编程最佳实践；
性能优势：Set 的 add() 和 has() 时间复杂度均为 O(1)，整体算法为 O(n)，远优于嵌套循环的 O(n²) 方案。