为什么 splice 在这个 for 循环中不起作用？

Question

var arr = ['apples','oranges','pears','grapes'];

for (var i=0; i<arr.length; i++) {
  if (arr[i] == 'pears') {
    arr.splice(i,0,'limes');
  }
}

当我尝试在 jsfiddle 中运行它时，页面会冻结。如果我使用特定索引代替 i (arr.splice(2,0,'limes')) 或尝试删除项目 (arr.splice(2,1))，jsfiddle 也会冻结。如果我在没有 for 循环的情况下执行此操作，而是选择一个特定的索引，它将起作用。这里有什么问题？有什么方法可以在 for 循环中使拼接工作（用于添加，而不是删除项目）？

此外，当我在此代码中使用 FreeCodeCamp 的编辑器时，它不会冻结，但它会返回原始数组，就好像从未在其上使用过 splice。但是，如果我为它分配一个变量（var rem = arr.splice(i,1) 在 for 循环中），它会返回已删除的项，而不会实际修改数组本身（数组保持完全相同）。

Answer 1

arr.splice(i,0,'limes'); 

将在“梨”元素之前注入“石灰”元素， 有效地将其移向阵列末尾的一个位置， 所以在下一次迭代中，您的代码将再次达到“梨”， 并在它前面再注入一个“石灰”，依此类推。

您可以通过添加轻松地对此进行可视化

console.log(arr);

在你的 if 块之后，这将导致如下输出：

    ["apples", "oranges", "limes", "pears", "grapes"]
    ["apples", "oranges", "limes", "limes", "pears", "grapes"]
    ["apples", "oranges", "limes", "limes", "limes", "pears", "grapes"]
    ["apples", "oranges", "limes", "limes", "limes", "limes", "pears","grapes"]
    ... 

Answer 2

这就是for 循环的工作原理：

for (var i=0; i < arr.length; i++);

i=0;用0初始化i；然后，在每次迭代开始时检查此条件i < arr.length，如果它是true，则执行下一次迭代，否则退出循环。在每次迭代结束时i++ 递增i。

由于arr.splice(i,0,'limes') 改变了数组并在i 位置添加了一个元素，它会将值pears 推送到下一个索引。因此，if (arr[i] == 'pears') 将永远是 true，而 i < arr.length 永远不会是 false：Endless for ...

Answer 3

你有一个无限循环。您在梨之前添加一个新元素，而不是删除它。所以下一次迭代会再次给你梨。如果这是您的意图，只需添加一个 break 语句。如果要替换元素 pear 可以使用以下函数。

来自 MDN

array.splice(start, deleteCount[, item1[, item2[, ...]]])

您可以看到您没有删除任何内容，而是在索引 i 之前（即梨之前）添加了一个新元素。

var arr = ['apples','oranges','pears','grapes'];

for (var i=0; i<arr.length; i++) {
  if (arr[i] == 'pears') {
    arr.splice(i,1,'limes');
 
  }
}

console.log(arr);