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

这是因为您在迭代时改变原始数组：

let x2 = x.splice(0,5); // should be avoided.

每次更改时，阵列的长度也会减少。

Answer 2

使用 Array.slice（...）代替 Array.splice（...）

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

After a = **x.splice(0,5)** =>
 x => [5,6,7,8,9,10,11]
 a => [0,1,2,3,4]

After a = **x.slice(0,5)** =>
 x => [0,1,2,3,4,5,6,7,8,9,10,11]
 a => [0,1,2,3,4]

由于您使用（... i＆lt; x.length ...）条件，在两次拼接操作后，您将到达数组的末尾。（循环你得到相同的情况）

Answer 3

回答你的问题原因。

让我清楚一下这个循环并保持splice方法（因为它是改变你的数组的东西）并在每次迭代中将数组x的长度记录到控制台。 / p>

＆＃13;

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);
}

＆＃13;

让我们看看会发生什么。

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

这就是你的循环在第二次迭代后结束的原因（这是你在一次迭代中处理5个位置的第10个位置）。

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

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

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

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

＆＃13;

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);

＆＃13;

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

Javascript对于不完整的数组循环

3 个答案: