El siguiente código debería devolver una matriz vacía pero está devolviendo 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>Esto en realidad está haciendo lo que le estás diciendo.
Una implementación de array.map podría ser así:
array.prototype.map = function(transform) { let output = []; for(let index = 0; index < this.length; ++index) { output.push(transform(this[index])); } return output; }El bucle sería así:
Index = 0, length = 6, remove first itemIndex = 1, length = 5, remove first remaining itemIndex = 2, length = 4, remove first remaining itemIndex = 3, length = 3, terminate loopEs por eso que solo está eliminando tres elementos.
El resultado de esto es que array.map es la función inapropiada para el trabajo.
Hay varias maneras de implementar esto. Una forma es iterar a través de la matriz hacia atrás:
for(let index = fruits.length-1; index >= 0; --index) { if(fruits[index] === 'Banana') { fruits.splice(index, 1); } }Un ejemplo:
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>.forEach() va en una dirección hacia adelante (por ejemplo, 0...5 ), por lo que si se elimina un elemento, la longitud disminuye a medida que la longitud disminuye a la mitad de la longitud, la referencia del índice será mayor que la longitud. por lo tanto, queda la mitad de la matriz.
Al disminuir la longitud de una matriz, vaya en la dirección inversa (por ejemplo, 5...0 ). El siguiente ejemplo usa un bucle for inverso y .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);