Javascript：for语句不处理数组中的所有元素答案

【问题标题】：Javascript: for-statement not processing all elements in arrayJavascript：for语句不处理数组中的所有元素
【发布时间】：2020-01-03 16:40:24
【问题描述】：

我有一个数组，里面有各种段落：

var content = [ "<p>This is a paragraph 1</p>", 
                "<p>This is a paragraph 2</p>", 
                "<p>This is a paragraph 3</p>", 
                "<p>This is a paragraph 4</p>", 
                "<p>This is a paragraph 5</p>" ]

我想对数组中的每个元素执行一个简单的操作。每个段落都需要放在一个容器内，然后从数组中删除。这是对应的 HTML：

<div class="article">
  <div id="cell1" class="text-block">
    <div class="container"></div>
  </div>
</div>

这就是我试图做我上面描述的事情的方式：

for (i = 0; i < content.length; i++) {
  console.log("Current item: " + content[i])
  //
  var itemtoRemove = content[i];
    $("#cell1 .container").append(content[i]);
  //
  content.splice($.inArray(itemtoRemove, content), 1)
}

我也把所有东西放在一起：https://jsfiddle.net/johschmoll/1mjzu4qg/71/

基本上，一切正常，但 for 语句似乎跳过了数组中的每个第二个元素。即使看过类似的案例，我也无法弄清楚原因。我在这里做错了什么？

【问题讨论】：

如果要在循环遍历数组的同时操作数组，则需要从length - 1 索引开始并向后移动。因为一旦您删除第一个元素并且您的 i 调整为 1，您实际上是在查看最初的第三个元素
Array#splice 改变原始数组。会是这样吗？
content.splice 在您循环时修改数组。
否则，从 for 循环切换到 while (content.length) 循环
因为你刚刚遇到的问题，:)

标签： javascript arrays iteration

【解决方案1】：

由于您在循环时修改数组，因此请使用 while 循环检查数组是否为空

while (content.length) {
  console.log("Current item: " + content[0])
  //
  var itemtoRemove = content[0];
    $("#cell1 .container").append(content[0]);
  //
  content.shift();
}

请记住，如果您所做的只是附加所有元素，那么这是不必要的。 append() 可以接受数组

$("#cell1 .container").append(content.splice(0));

【讨论】：

关于您的注释：好吧，我只是在追加，但重要的是从数组中删除追加的元素
因此，追加数组，然后将数组设置为空数组。两次操作
我应该解释一下我使用这个的上下文：我正在编写一个脚本，将段落放入一个容器中，直到这个容器“满”，所有不适合的段落都被放入放入单独的容器中。这就是为什么我需要修改数组。见这里：jsfiddle.net/johschmoll/1mjzu4qg/96 很高兴关于这方面的任何建议。
好的，所以在您的示例中，您不仅仅是附加元素。您有条件地将元素附加到不同的事物上。那是一个不同的用例。关于 sn-p，我唯一要说的就是指出 shift() 的用法，而不是 splice()
是的，感谢您指出。 shift() 对我来说是新的，总是很高兴学习新东西。

【解决方案2】：

因为您在每次迭代时都在修改数组，所以数组的长度会发生变化，您最终会跳过项目。相反，向后循环数组以避免该问题。

var content = [ "<p>This is a paragraph 1</p>", 
                "<p>This is a paragraph 2</p>", 
                "<p>This is a paragraph 3</p>", 
                "<p>This is a paragraph 4</p>", 
                "<p>This is a paragraph 5</p>" ]

for (var i = content.length-1; i >= 0 ; i--) {
  console.log("Current item: " + content[i])

  var itemtoRemove = content[i];
  $("#cell1 .container").append(content[i]);

  content.splice($.inArray(itemtoRemove, content), 1)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
  <div id="cell1" class="text-block">
    <div class="container"></div>
  </div>
</div>

【讨论】：