Javascript 使用Reduce将数字数组分成3块

可以有多种方法来解决这个问题，但我不确定为什么这个方法不能像预期的那样有效

[1,2,3,4,5,6,7,8].reduce((a, d, i, c) => [...a, c.splice(0, 3)], [])

结果-[[1,2,3]，[4,5,6]]

预期结果-[[1,2,3]，[4,5,6]，[7,8]]

请不要改变方法，因为我想知道为什么这个方法不能按预期工作

[1,2,3,4,5,6,7,8].reduce((a, d, i, c) => [...a, c.splice(0, 3)], [])

我想知道为什么这个不能按预期工作

[1,2,3,4,5,6,7,8].reduce((a, d, i, c) => [...a, c.splice(0, 3)], [])

问题是您正在从原始数组中删除条目，因此

reduce

会提前用完元素，因为在每次回调之前，它会检查要访问的索引是否仍然小于数组长度。在第二次回调之后，原始数组的长度是

2

，索引是

2

，因此

reduce

停止，永远不会生成第三个块

如果以较长的形式编写，则在调试器中单步执行时更容易看到发生了什么。与其录制视频，我只需插入代码：

[1,2,3,4,5,6,7,8]。减少（（a，d，i，c）=>{
log（“i”，i，“c”，JSON.stringify（c））；
返回[…a，c.拼接（0，3）]；
}, []);
。作为控制台包装器{
最大高度：100%！重要；
}
发生这种情况是因为您在迭代时对数组进行了变异。特别是，问题是当
reduce
到达第三个元素时，只有两个元素


[1,2,3,4,5,6,7,8]。减少（（a，d，i，c）=>{
console.log（“当前结果”，a）
console.log（“当前元素”，d）
console.log（“索引”，i）
console.log（“数组”，c）
返回[…a，c.拼接（0，3）]
}，[]）
我想是因为在第三次迭代中，索引是2，剩下的是[7,8]，所以结束了。@NenadVracar:
[7,8]。拼接（0,3）
返回
[7,8]
但它打破了循环，因为不再有索引为2的元素，只有0和1，因为该点剩下2个元素。像往常一样，您可以在这些场景中使用递减循环，或者在本例中使用
reduceRight
[1,2,3,4,5,6,7,8]。reduceRight（（a，d，i，c）=>[…a，c.splice（0,3）]，[]）@nenavracar:最后一个（
[1,2,3,4,5,6,7,8]）reduceRight（（a，d，i，c）=>[…a，c.splice（0，3）]，[]）非常出色，当然值得回答。