如何合并JavaScript数组并对对应索引值求和

嘿，这个基础问题其实挺典型的，我来一步步给你讲清楚怎么实现～

需求回顾 #

你有多个长度相同的数组，部分位置是null，需要把它们合并成一个数组：

• 对应索引的数值求和
• null要当作0来计算

比如你给的示例输入：

const arrays = [
  [null, 10222, 10222, null, 9999],
  [1870963, 1845801, 1830263, null, null],
  [1870963, 1845801, 1830263, null, null],
  // 可以继续添加更多同长度数组
];

要得到结果：[3741926, 3701824, 3670748, 0, 9999]

实现方法 #

这里给你两种常用的写法，一种简洁高效，一种更直观适合新手理解：

方法一：用Array.from + reduce（简洁版）

利用Array.from创建目标长度的数组，再用reduce对每个索引的所有值求和：

// 先判断输入数组是否为空，避免报错
if (!arrays.length) {
  console.log([]);
}

const result = Array.from({ length: arrays[0].length }, (_, index) => {
  return arrays.reduce((total, currentArr) => {
    // 用空值合并运算符??，只把null/undefined转为0，不影响正常的0值
    return total + (currentArr[index] ?? 0);
  }, 0);
});

console.log(result); // 输出目标数组

方法二：用双层forEach（直观版）

先初始化一个全0的结果数组，再遍历每个输入数组，把对应位置的值累加进去：

if (!arrays.length) {
  console.log([]);
}

// 初始化结果数组，长度和输入数组一致，初始值全为0
const result = new Array(arrays[0].length).fill(0);

arrays.forEach(currentArr => {
  currentArr.forEach((value, index) => {
    // 同样处理null为0
    result[index] += value ?? 0;
  });
});

console.log(result);

补充说明 #

• 两种方法都支持任意数量的同长度数组，不管你有n个数组都能处理
• 用??比||更准确：如果你的数组里有合法的0值，||会把它也转为0，而??只会处理null和undefined
• 如果不确定输入数组是否都长度一致，可以加个校验步骤，比如检查所有数组的length是否等于第一个数组的length，避免出现索引越界的问题

这样就能完美得到你想要的结果啦～

内容的提问来源于stack exchange，提问作者Php Symfony Guru