JavaScript中reduce匿名函数后,[]的作用及报错问题咨询

首先得明确：原代码里的,[]不是和concat绑定的特殊语法，它是Array.reduce()方法的第二个参数——也就是累加器acc的初始值。

1. 原函数的正确结构 #

先把flattenArray拆成清晰的结构：

function flattenArray(array) {
  // reduce的第一个参数是回调函数，第二个参数是acc的初始值[]
  return array.reduce(
    (acc, cur) => acc.concat(cur),  // 回调函数：每次用acc拼接当前元素cur
    []  // 累加器acc的初始值，是个空数组
  );
}

这里的逻辑是：

• 初始时acc是传入的空数组[]
• 遍历原数组的每个元素cur，用acc.concat(cur)把cur（如果是子数组就展开一层，是单个元素就直接加入）拼到acc里
• 每次回调的返回值会作为下一次的acc，最终返回完整的扁平化数组

2. 你写的错误代码问题在哪？ #

你的quickFlatten犯了两个关键错误：

错误1：把reduce的初始值放错了位置

你把[]写在了箭头函数内部的acc.concat(cur), []里，导致reduce没有传入第二个参数。当reduce没有初始值时，第一次调用回调函数：

• acc会是原数组的第一个元素，而不是空数组
• 如果原数组的第一个元素不是数组（比如[1, [2,3]]），那acc就是1，1.concat自然不存在，直接抛出TypeError

错误2：箭头函数加{}后没有显式return

箭头函数有两种写法：

• 不带{}：是隐式返回，自动返回箭头后面表达式的结果（比如原代码里acc.concat(cur)会自动返回）
• 带{}：是显式返回，必须写return才能把结果传出去。你写的acc.concat(cur), [];里，逗号运算符确实会返回最后一个值[]，但你没写return，所以回调函数每次都返回undefined，下一次的acc就是undefined，同样会报错。

3. 修正你的代码 #

如果一定要给箭头函数加{}，正确写法应该是：

function quickFlatten(array) {
  return array.reduce((acc, cur) => {
    // 显式返回拼接后的结果，同时把[]作为reduce的初始值传对位置
    return acc.concat(cur);
  }, []);
}

4. 该从哪里学这些知识？ #

重点学习这几个点：

• Array.prototype.reduce()的参数规则：特别是初始值的作用——有没有初始值，第一次回调的acc和cur对应的值完全不同
• 箭头函数的语法差异：区分隐式返回（无{}）和显式返回（有{}必须写return）
• 逗号运算符：它会依次执行多个表达式，返回最后一个表达式的结果，但日常开发里很少单独这么用，别和其他语法混了

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