如何解决表格中同一值重复出现问题？前端数组去重方案咨询

核心逻辑：针对你的场景中所有字段都是字符串、数字这类基础类型数组的情况，使用ES6 Set 实现去重是最优方案，时间复杂度为O(n)，性能远高于遍历比对的O(n²)方案，代码也更简洁。

前置问题修正 #

你之前尝试的去重代码存在逻辑顺序错误：removeDuplicates方法里console.log(arr)写在了return语句之后，永远不会执行，调整后可用的去重工具方法如下：

// 放到methods中，兼容空值、非数组场景
removeDuplicates(arr) {
  if (!Array.isArray(arr)) return arr
  // 可在此处加console.log(arr)排查去重前的数据
  return [...new Set(arr)]
}

方案1：单个字段处理（灵活可控，推荐） #

在每个数组字段执行join拼接之前，先调用去重方法即可，完整修改后的代码：

methods: {
  removeDuplicates(arr) {
    if (!Array.isArray(arr)) return arr
    return [...new Set(arr)]
  },
  caseFileDetailedTableData(row) {
    return [
      {
        columnName: I18n.t('ccenter.case_file.table.total_debt_outstanding'),
        columnValue: row.totalDebtOutstanding
      },
      {
        columnName: I18n.t('ccenter.case_file.table.company_names'),
        columnValue: this.removeDuplicates(row.debtorInfo.companyNames).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.aliases'),
        columnValue: this.removeDuplicates(row.debtorInfo.aliases).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.birthdates'),
        columnValue: this.removeDuplicates(row.debtorInfo.birthdates).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.phones'),
        columnValue: this.removeDuplicates(row.debtorInfo.phones).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.emails'),
        columnValue: this.removeDuplicates(row.debtorInfo.emails).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.addresses'),
        columnValue: this.removeDuplicates(row.debtorInfo.addresses).join(', ') || '-',
      },
      {
        columnName: I18n.t('ccenter.case_file.table.customer_numbers'),
        columnValue: this.removeDuplicates(row.debtorInfo.customerNumbers).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.contract_numbers'),
        columnValue: this.removeDuplicates(row.contractNumbers).join(', ') || '-'
      },
      {
        columnName: I18n.t('ccenter.case_file.table.invoice_numbers'),
        columnValue: this.removeDuplicates(row.invoiceNumbers).join(', ') || '-'
      },
    ]
  }
}

处理后你给出的重复手机号示例354, 3541914408, 3541914408, 3541914408会自动转为354, 3541914408，符合预期。

方案2：批量处理（减少重复代码） #

如果字段很多不想每个都写去重调用，可以先批量处理debtorInfo下所有数组字段：

caseFileDetailedTableData(row) {
  // 批量去重debtorInfo下所有数组属性
  const processedDebtorInfo = Object.fromEntries(
    Object.entries(row.debtorInfo).map(([key, value]) => [
      key, 
      Array.isArray(value) ? this.removeDuplicates(value) : value
    ])
  )
  // 单独处理其他顶层数组字段
  const processedContractNumbers = this.removeDuplicates(row.contractNumbers)
  const processedInvoiceNumbers = this.removeDuplicates(row.invoiceNumbers)

  return [
    {
      columnName: I18n.t('ccenter.case_file.table.total_debt_outstanding'),
      columnValue: row.totalDebtOutstanding
    },
    {
      columnName: I18n.t('ccenter.case_file.table.company_names'),
      columnValue: processedDebtorInfo.companyNames.join(', ') || '-'
    },
    // 后续其他debtorInfo字段直接用processedDebtorInfo的属性即可，无需再单独去重
    // ...剩余字段结构和方案1一致，替换数据源即可
  ]
}

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