javascript - javascript，forEach和removeChild不可预期的行为

我希望从列表中删除所有项目并将其替换为其他项目

var list = document.querySelector("ul");
[].forEach.call(list.childNodes, list.removeChild.bind(list));

上面的代码无法按预期工作，而是仅删除了一半的项目（列表中每隔第二个项目）。
如果我将其更改为

var list = document.querySelector("ul");
[].slice.call(list.childNodes).forEach(list.removeChild.bind(list));

然后它按预期工作，
谁能解释？

最佳答案

概念

要解释第一种情况下的“不可预测”行为，请考虑以下情况：

var array = [0, 1, 2, 3, 4, 5, 6, 7];

这使得行为更容易解释，而无需分散注意力的.call()和.bind()方法。

array.forEach(function(num, index) {
  console.log(num, index);
  array.splice(index, 1);
});

您可能想知道为什么输出是：

0 0
2 1
4 2
6 3

但这实际上非常简单。 .forEach()遍历索引，直到不再满足i < array.length，而在每次迭代的开始，您的数组如下所示：

[0, 1, 2, 3, 4, 5, 6, 7];
 ^
 0

[1, 2, 3, 4, 5, 6, 7];
    ^
    1

[1, 3, 4, 5, 6, 7];
       ^
       2

[1, 3, 5, 6, 7];
          ^
          3

[1, 3, 5, 7];
             ^
            (4 < array.length) !== true

这是在对.forEach()的调用中操纵要迭代的数组时发生的情况。

对于执行[].slice.call(array)的情况，您要做的只是对数组的所有索引进行浅表复制。这使您可以迭代副本的索引，同时从原始节点中删除节点。

以下是一个综合示例，但请确保您的浏览器支持ES6模板字符串。

演示版

var array = [0, 1, 2, 3, 4, 5, 6, 7];

document.write(`<p>original.forEach()</p>`);

array.forEach(function(num, index) {
  document.write(`<pre>num: ${num}, index: ${index}, array: [${array}]</pre>`);
  array.splice(index, 1);
});

document.write(`<pre>result: [${array}]</pre>`);

array = [0, 1, 2, 3, 4, 5, 6, 7];

var copy = array.slice();

document.write(`<p>copy.forEach()</p>`);

copy.forEach(function(num, index) {
  document.write(`<pre>num: ${num}, index: ${index}, array: [${array}]</pre>`);
  array.splice(array.indexOf(num), 1); // removing by reference, not by index
});

document.write(`<pre>result: [${array}]</pre>`);

body > * {
  padding: 0;
  margin: 0;
}

关于javascript - javascript，forEach和removeChild不可预期的行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35007569/