如何在JavaScript数组添加元素后去重及chartDataResults2数组州值去重

嘿，我来帮你搞定数组去重和State字段去重的问题！下面分两部分给你讲清楚实现方法，还会结合你现有的代码做优化~

一、通用数组添加元素后去重方法 #

根据数组元素类型的不同，有两种常用的去重方式：

1. 简单类型数组（字符串、数字等） #

用Set对象是最简洁的方式，它会自动过滤重复值：

// 假设原数组是arr，先添加新元素
arr.push(newItem);
// 去重得到新数组
const uniqueArr = [...new Set(arr)];

2. 对象数组（根据特定字段去重） #

如果是对象数组，需要根据某个字段（比如你的State.Title）来判断重复，用reduce方法更灵活：

// 先添加新元素到数组
arr.push(newItem);
// 根据指定字段去重，这里以State.Title为例
const uniqueArr = arr.reduce((acc, current) => {
  // 检查累加器里是否已有相同State.Title的对象
  const isDuplicate = acc.some(item => item.State.Title === current.State.Title);
  if (!isDuplicate) {
    acc.push(current);
  }
  return acc;
}, []);

二、针对chartDataResults2数组的State去重优化 #

结合你现有的代码，我帮你简化并优化State去重的逻辑：

优化方案1：直接用reduce去重（推荐） #

不需要额外定义groupBy函数，一步到位：

// 对chartDataResults2数组按State.Title去重，保留每个State的第一个出现项
const uniqueChartData = chartDataResults2.reduce((acc, curr) => {
  const hasSameState = acc.some(item => item.State.Title === curr.State.Title);
  if (!hasSameState) {
    acc.push(curr);
  }
  return acc;
}, []);

优化方案2：简化你的groupBy函数 #

如果你还是想用分组的思路，可以把groupBy函数提到循环外（避免重复定义），再取每组的第一个元素：

// 把groupBy函数放到循环外面，只定义一次
function groupBy(array, keyFn) {
  const groups = {};
  array.forEach(item => {
    const key = keyFn(item);
    groups[key] = groups[key] || [];
    groups[key].push(item);
  });
  return Object.values(groups);
}

// 对chartDataResults2按State.Title分组，再取每组第一个元素得到去重数组
const stateGroups = groupBy(chartDataResults2, item => item.State.Title);
const uniqueChartData = stateGroups.map(group => group[0]);

针对你现有循环代码的优化 #

你原来的代码把groupBy函数写在for循环里，会导致每次循环都重新定义函数，非常影响性能。可以调整成这样：

// 先定义groupBy函数（只定义一次）
function groupBy(array, keyFn) {
  const groups = {};
  array.forEach(item => {
    const key = JSON.stringify(keyFn(item));
    groups[key] = groups[key] || [];
    groups[key].push(item);
  });
  return Object.values(groups);
}

// 先对dataResults按State.Title分组
const result = groupBy(dataResults, item => item.State.Title);

// 遍历分组结果，获取每个State的Title
for (let i = 0; i < result.length; i++) {
  const States1 = result[i][0].State.Title;
  // 这里可以把States1添加到chartDataResults2，或者做其他逻辑
}

这样处理后，不仅能高效去除State的重复值，代码结构也更清晰~

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