Javascript For 不完成数组循环

Question

我正在尝试构建一个包含 12 个位置的数组的循环，用 5 个项目包装并在此间隔后插入另一个代码，但由于某种原因，循环最多只能达到 10 个。 为什么只有当数组有 11 或 12 个位置时循环才会在第十个位置停止？ 有人可以帮我解释一下原因吗？

let x = [0,1,2,3,4,5,6,7,8,9,10,11];
x.map(_=> {
    console.log("<div>");
    x.splice(0,5).map((y,k)=>
        console.log('item: ' + y)
    )
    console.log("</div>");
    console.log('interval of 5 text');
});

x = [0,1,2,3,4,5,6,7,8,9,10,11];
for(i=0; i < x.length; i++){
    let x2 = x.splice(0,5);
    console.log("<div>");
    for(j=0; j < x2.length; j++){
        console.log('item: ' + x2[j]);
    }
    console.log("</div>");
    console.log('interval of 5');
}

Answer 1

回答你的问题为什么。

让我稍微澄清一下这个循环，只保留 splice 方法(因为它是改变数组的方法)并将数组 x 的长度记录为每次迭代中的控制台。

x = [0,1,2,3,4,5,6,7,8,9,10,11];
for(var i=0; i < x.length; i++){
    let x2 = x.splice(0,5);
    console.log(x.length);
}

让我们看看会发生什么。

loop execution:
------------------------------ 
i  |  x.length  |  i < x.length
------------------------------
0  |     12     |     true
1  |     7      |     true
2  |     2      |     false

这就是为什么循环在第二次迭代后结束(这是第 10 个位置，因为您在单次迭代中处理 5 个位置)。

<小时/> 编写执行上述逻辑并在之后使数组保持清空的代码的一种方法是这样。

创建一个执行以下操作的函数:

• 获取数组和组的大小
• 创建该数组的副本
• 获得正确的迭代次数
• 执行你的逻辑
• 返回(空数组)并重新分配旧数组

要获得正确的迭代次数，请将数组的长度除以组的大小并将其向上舍入。

let x = [0,1,2,3,4,5,6,7,8,9,10,11];

function customArrayLoop(arr, toTake) {
  const arrCopy = [...arr];
  const loopMax = Math.ceil(x.length / toTake);

  for (let i = 0; i < loopMax; i++) {
    let x2 = arrCopy.splice(0,5);
    console.log("<div>");
    for(let j=0; j < x2.length; j++){
      console.log('item: ' + x2[j]);
    }
    console.log("</div>");
    console.log('interval of 5');
  }

  return arrCopy;
}

x = customArrayLoop(x, 5);
console.log(x);

虽然仍然不是最好的解决方案(因为您想保留循环的内部逻辑)，但它是更安全的解决方案。