嵌套数组元素求和时出现字符串拼接输出的原因解析

嘿，我来帮你拆解这个问题背后的JavaScript隐式类型转换逻辑，核心就是数组在和非数组/非对象的值做加法时会被自动转为字符串这一规则，咱们一步步来看：

1. 第一个console.log(0+array[0]+array[1]+array[2])的执行逻辑 #

JavaScript的+运算符有两种行为：数值相加、字符串拼接，优先级是「只要有一方是字符串（或能被转为字符串的类型），就触发拼接」。咱们拆分每一步：

• 第一步：0 + array[0] → 0 + [1,4]
  数字和数组相加时，数组会自动调用toString()方法转为字符串，[1,4].toString()的结果是"1,4"。此时数字0会被转为字符串"0"，两者拼接得到"01,4"。
• 第二步："01,4" + array[1] → "01,4" + [11]
  现在左边已经是字符串了，右边的数组[11]同样转为"11"，拼接后得到"01,411"。
• 第三步："01,411" + array[2] → "01,411" + [3,5,7]
  数组[3,5,7]转为"3,5,7"，最终拼接结果就是"01,4113,5,7"。

2. 第二个array.reduce((acc, value)=>acc+value, 0)的执行逻辑 #

reduce的初始值acc是数字0，但第一次迭代就改变了acc的类型：

• 第一次迭代：acc=0，value=[1,4]
  和上面一样，0 + [1,4]触发隐式转换，得到字符串"01,4"，此时acc变成了字符串类型。
• 第二次迭代：acc="01,4"，value=[11]
  字符串和数组相加，数组转为"11"，拼接后acc变为"01,411"。
• 第三次迭代：acc="01,411"，value=[3,5,7]
  数组转为"3,5,7"，拼接后得到最终结果"01,4113,5,7"。

补充：正确的嵌套数组求和写法 #

如果要实现所有元素的数值求和，你需要先处理每个子数组的内部元素，比如：

let array = [[1,4], [11], [3,5,7]];

// 方法1：先扁平化数组再求和
console.log(array.flat().reduce((acc, val) => acc + val, 0)); // 输出：31

// 方法2：嵌套reduce处理子数组
console.log(array.reduce((total, subArr) => {
  return total + subArr.reduce((sum, num) => sum + num, 0);
}, 0)); // 输出：31

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