展平数组：0 来自哪里？

Question

这个挑战是在不定义任何新函数的情况下展平数组：

// challenge
const arr = [1, [2]]
const flattened = arr.reduce(/*your code here, no function expressions or declarations allowed*/, [])
console.log(flattened) // expected: [1, 2]

我的解决方案不起作用，但真正困扰我的是我不知道0 来自哪里：

// Solution 1
const arr = [1, [2]]
const flattened = arr.reduce(Function.prototype.call.bind(Array.prototype.concat), [])
console.log(flattened) // unexpected result: [1, 0, 1, [1], 2, 1, 1, [1]]

我希望代码的行为如下所示，它按预期工作：

// Solution 2
const arr = [1, [2]]
const flattenReducer = (x, y) => Function.prototype.call.bind(Array.prototype.concat)(x, y)
const flattened = arr.reduce(flattenReducer, [])
console.log(flattened) // logs the expected result: [1, 2]

我在 Node、Chrome 和 Firefox 中进行了测试，得到了相同的结果。

那么 0 来自哪里，为什么解决方案 1 和解决方案 2 会为 flattened 产生不同的值？

Answer 1

reduce 的回调不仅有两个参数。实际上它有四个：累加器、当前值、索引和原始数组。

您的解决方案 #1 相当于

arr.reduce(function (x, y, z, a) {
    return Function.prototype.call.bind(Array.prototype.concat)(x, y, z, a);
}, []);

或等价的

arr.reduce(function (x, y, z, a) {
    return x.concat(y, z, a);
}, []);

这是错误的。

另请注意，您的两个解决方案实际上都不会展平二维以上的数组。

Answer 2

.concat() 连接.reduce(function(a,b,index,array) {}) 处的所有参数

Answer 3

在这种情况下不需要 reduce，只需将 const 连接到新的 const 或 var。

const arr = [1, [2]];
var arrFlat = [].concat.apply([], arr);
console.log(arrFlat);

虽然想了解此问题的学术部分是勇敢的，但您最好了解基类方法本身的基本用法，因为它们的构建是为了帮助冗余用例而无需耦合/嵌套/链接大部分。