为何两段chunkArrayInGroups代码结果不同？FCC挑战疑问

我正在完成freeCodeCamp的JavaScript算法与数据结构基础算法脚本中的Chunky Monkey挑战，原本以为下面两段代码会返回相同结果，但只有第二段通过了挑战，想请大家解释二者结果不同的原因。

Code 1 #

function chunkArrayInGroups(arr, size) {
  let newArr = [];
  for (let i = 0; i < (arr.length); i + size) {
    console.log(`arr = ${arr}`)
    let subArr = []
    subArr.push(arr.splice(i, i + size))
    newArr.push([subArr])
  }
  return newArr
}

console.log(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4));

Code 2 #

function chunkArrayInGroups(arr, size) {
  let newArr = [];
  for (let i = 0; i < (arr.length); i + size) {
    newArr.push(arr.splice(i, i + size))
  }
  return newArr
}

console.log(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4));

核心差异分析 #

两段代码的关键区别在于数组嵌套层级的处理：

• arr.splice(start, deleteCount)方法本身会返回被删除的元素组成的数组。比如第一次调用时，原数组前4个元素被删除，返回[0,1,2,3]。
• Code 2直接将这个返回的子数组push到newArr中，最终得到的结果是符合挑战要求的二维数组结构，比如[[0,1,2,3],[4,5,6,7],[8]]。
• Code 1多做了两层不必要的嵌套：先把splice返回的数组push到subArr（此时subArr变成[[0,1,2,3]]），再把[subArr]（即[[[0,1,2,3]]]）push到newArr里，导致最终结果是三层嵌套的数组，完全不符合挑战对输出格式的要求，因此无法通过测试。

另外补充：两段代码的for循环都存在逻辑错误——i + size不会修改循环变量i的值，正常应该写成i += size。Code 2能终止循环是因为splice会不断缩短原数组长度，当arr.length变为0时，i < arr.length的条件不成立才停止；而Code 1即使循环能终止，结果格式也完全错误。

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