splice()没有清空数组。

Question

下面的代码应该返回空数组，但它正在返回Banana、Banana、Banana

​

const fruits = ["Banana", "Banana", "Banana", "Banana", "Banana", "Banana"];

fruits.map((ele) => {
  if (ele === "Banana") {
    fruits.splice(0, 1)
  }
})

document.getElementById("demo").innerHTML = fruits;

<div id="demo"></div>

​

Answer 1

这实际上是在做你说的。

array.map的实现可以如下所示：

array.prototype.map = function(transform) {
    let output = [];
    for(let index = 0; index < this.length; ++index) {
          output.push(transform(this[index]));
    }
    return output;
}

循环将是这样的：

• Index = 0, length = 6, remove first item
• Index = 1, length = 5, remove first remaining item
• Index = 2, length = 4, remove first remaining item
• Index = 3, length = 3, terminate loop

这就是为什么它只删除了三个项目。

这样做的结果是，array.map是不适合这项工作的函数。

有很多方法可以实现这一点。一种方法是向后遍历数组：

for(let index = fruits.length-1; index >= 0; --index) {
    if(fruits[index] === 'Banana') {
        fruits.splice(index, 1);
    }
}

举个例子：

​

const fruits = ["Banana", "Apple", "Banana", "Banana", "Orange", "Banana"];

for(let index = fruits.length-1; index >= 0; --index) {
    if(fruits[index] === 'Banana') {
        fruits.splice(index, 1);
    }
}

console.log(fruits);

<div class="demo"></div>

​

Answer 2

.forEach()朝着一个前进的方向前进。因此，如果一个元素被移除，那么当长度减少到长度的一半时，索引引用将大于长度--因此数组的一半保持不变。

当减少数组的长度时，按旋转方向前进(例如。5...0)。下面的示例使用反向for循环和.splice(i, 1)。

​

const fruits = ["Banana", "Banana", "Banana", "Banana", "Banana", "Banana"];

for (let i = fruits.length; i >= 0; i--) {
  if (fruits[i] === "Banana") {
    fruits.splice(i, 1);
  }
}

console.log(fruits);

​