ReactJS中如何按指定步长分区间聚合数组生成新数组

原有代码问题 #

• 计数、求和变量定义在全局，没有按区间独立存储，不同区间的计算结果会互相覆盖
• 仅用单个对象存储输出，无法保存多个区间的统计结果，最终只会返回最后一次匹配到的单条数据
• 双层循环逐区间判断效率低，且没有处理JS浮点数计算精度问题，容易出现区间匹配错误
• 遗漏了sumOfD字段的统计逻辑

可直接使用的实现代码 #

const aggregateByBRange = (sourceData, step) => {
  // 计算总区间数量，规避浮点数计算误差
  const rangeTotal = Math.round(1 / step);
  // 初始化所有区间的统计基础结构
  const rangeList = Array.from({ length: rangeTotal }, (_, idx) => {
    const startVal = idx * step;
    const endVal = idx === rangeTotal - 1 ? 1 : startVal + step;
    return {
      labelOfB: `${Number(startVal.toFixed(2))} - ${Number(endVal.toFixed(2))}`,
      CountOfA: 0,
      sumOfC: 0,
      sumOfD: 0
    }
  });

  // 遍历源数据，匹配对应区间累加统计值
  sourceData.forEach(item => {
    // 直接计算元素所属区间索引，兼容b=1的边界场景
    const rangeIdx = Math.min(Math.floor(item.b / step), rangeTotal - 1);
    const target = rangeList[rangeIdx];
    target.CountOfA++;
    target.sumOfC += item.c;
    target.sumOfD += item.d;
  });

  // 过滤掉无数据的空区间后返回
  return rangeList.filter(item => item.CountOfA > 0);
}

调用示例 #

const data = [{
    a: 0,
    b: 0.75,
    c: 0,
    d: 0
  },
  {
    a: 1,
    b: 0.88,
    c: 0,
    d: 0
  },
  {
    a: 2,
    b: 0.38,
    c: 0,
    d: 1
  },
  {
    a: 3,
    b: 0.7,
    c: 1,
    d: 1
  },
  {
    a: 4,
    b: 0.93,
    c: 1,
    d: 0
  }
];

// 传入步长0.1即可得到对应聚合结果
const output = aggregateByBRange(data, 0.1);
console.log(output);

逻辑说明 #

• 提前初始化所有区间的统计容器，每个区间独立维护计数、求和值，从根源避免变量共用导致的数据覆盖问题
• 直接通过数值计算得到元素所属区间索引，替代双层循环逐区间判断，执行效率更高
• 内置浮点数精度兼容处理，同时对b=1的边界值做了适配，不会出现数据漏匹配、超出区间范围的问题
• 最终自动过滤没有匹配数据的空区间，返回的字段结构完全符合需求

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