使用reduceft.logical AND &&从简单数组到二维数组

问题描述

我需要将一个简单的平面数组“转换”为一个二维数组，然后我继续查看它对参数的看法。
我尝试重新创建 this answer 的代码，但出现此错误：

console.log(array.reduce((twoDArray,n,i) => (i % 3 == 0 ? twoDArray.push([n]) : twoDArray[twoDArray.length-1].push(n)),[]));
                                                                                                                ^
TypeError: Cannot read property 'push' of undefined

问题是我没有在箭头函数的末尾添加 && twoDArray。在这里你可以看到：

let array = [1,2,3,4,5,6,7,8,9];

// this works
console.log(array.reduce((twoDArray,i) => (i % 3 == 0 ? twoDArray.push([n]) : twoDArray[twoDArray.length-1].push(n)) && twoDArray,[]));

// here the second push() throws an error
console.log(array.reduce((twoDArray,[]));

现在我不明白一些事情，即：

• 这个 && twoDArray 是如何工作的？它的目的是什么？
• 如果此添加项仅放置在生成错误的 push() 之后，如何修复错误。代码在到达 && 之前不应该抛出错误吗？

解决方法

这是必需的，因为 push 返回数组的新长度 - 但累加器需要是数组，而不是长度。

没有&&，并且将代码缩进多行以使其更清楚发生了什么，第二个代码等效于：

let array = [1,2,3,4,5,6,7,8,9];

// here the second push() throws an error
console.log(array.reduce((twoDArray,n,i) => {
  return (i % 3 == 0 ? twoDArray.push([n]) : twoDArray[twoDArray.length - 1].push(n))
},[]));

同：

let array = [1,i) => {
  return (
    i % 3 == 0
      ? twoDArray.push([n])
      : twoDArray[twoDArray.length - 1].push(n)
  );
},[]));

现在，问题应该清楚了：无论输入哪个条件，回调都会评估为

  return (
    i % 3 == 0
      ? someNumber
      : someNumber
  );

因为 .push 的计算结果是数组的新长度。

向其中添加 && twoDArray 使回调看起来像：

  return (
    i % 3 == 0
      ? someNumber
      : someNumber
  ) && twoDArray;

因此返回 twoDArray 而不是数字。

代码在到达 && 之前不应该抛出错误吗？

确实如此。错误在 second 迭代时抛出，当 twoDArray[twoDArray.length-1] 时，当 twoDArray 是数字时，计算结果为 undefined，因此无法推送到。但是 twoDArray 是一个数字而不是数组的问题是由先前（第一次）迭代末尾的代码导致的：缺少 && twoDArray;。

这样的代码非常令人困惑。如果代码不可读，尽量不要将其压缩为一行。另一个问题是，当每次迭代中累加器是同一个对象时，.reduce 可以说是不合适的。考虑改为执行以下操作：

let array = [1,9];

const twoDArray= [];
array.forEach((n,i) => {
  i % 3 == 0
    ? twoDArray.push([n])
    : twoDArray[twoDArray.length - 1].push(n);
});
console.log(twoDArray);

并使用 if/else 代替条件运算符：

let array = [1,i) => {
  if (i % 3 === 0) twoDArray.push([n])
  else twoDArray[twoDArray.length - 1].push(n);
});
console.log(twoDArray);