如何避免JavaScript中map函数处理后的数据重复？

先修正map代码的基础错误 #

你当前的map函数参数名写错了，参数定义的是serviceItems，但内部使用的是service，这会导致变量未定义。同时，你每个map元素返回的是包含单个对象的数组，这会让dataService变成数组套数组的结构，后续处理会更麻烦，建议直接返回对象：

const dataService = serviceItems.map((service) => ({
  text: 'Data of Service',
  ul: [
    `A: ${service.serviceCategoryName}
B: ${translateUserRules(service.departmentAssessment)}
C: ${servicePaymentMethod(service.paymentMethod)}
D: ${getContractName(service.contractId)}
E: ${getProjectName(service.projectId)}`
  ]
}));

错误原因分析 #

你写的去重代码dataService.filter(x => !x.includes(dataService))逻辑完全错误：

• x是dataService的元素（按你原来的写法是包含对象的数组，修正后是单个对象），includes方法是用来检查数组是否包含某个元素，你把整个dataService数组传进去，类型不匹配，所以触发类型错误。
• 这个逻辑本身也无法实现去重，因为你是在判断当前元素是否包含整个数组，这显然不符合需求。

两种去重实现方案 #

方案1：基于生成的文本内容去重 #

如果两个服务生成的ul文本完全一致就算重复，可以用Set记录已经出现过的文本内容：

const seenContent = new Set();
const filteredData = dataService.filter(item => {
  // 取出ul数组里的唯一文本内容
  const content = item.ul[0];
  if (seenContent.has(content)) {
    return false; // 已存在，过滤掉
  }
  seenContent.add(content);
  return true; // 不存在，保留
});

方案2：基于原始数据的唯一标识去重（更可靠） #

如果原始service对象有唯一标识（比如contractId+projectId的组合可以唯一标识一个服务），用这个标识去重会比文本更可靠（避免文本格式细微差异导致的误判）：

const seenKeys = new Set();
const filteredData = serviceItems
  .map((service) => {
    // 生成唯一标识
    const uniqueKey = `${service.contractId}-${service.projectId}`;
    return {
      text: 'Data of Service',
      ul: [
        `A: ${service.serviceCategoryName}
B: ${translateUserRules(service.departmentAssessment)}
C: ${servicePaymentMethod(service.paymentMethod)}
D: ${getContractName(service.contractId)}
E: ${getProjectName(service.projectId)}`
      ],
      uniqueKey
    };
  })
  .filter(item => {
    if (seenKeys.has(item.uniqueKey)) {
      return false;
    }
    seenKeys.add(item.uniqueKey);
    return true;
  });

内容的提问来源于stack exchange，提问作者LaraF