JavaScript 从数组中删除所有出现的值

Question

I am using the snippet below to remove all occurrences of a value (ie 97 in this case) from an Array. I am unable to understand why the output array has a value 97 in it. When I remove 32 it removes all 32s from the array. Same with 6. What's wrong with 97 here? Kind of strange for me. (I was thinking may be 97 is not typed properly or something).

 var inputArr = [3, 97, 32, 6, 97, 2, 9,32, 1, 32, 97, 97, 6, -1, 5]; function removeItem(array, item) { for(i = 0; i<array.length; i++){ if(array[i] == item) { array.splice(array.indexOf(item), 1); } } } removeItem(inputArr, 97); removeItem(inputArr, 32); removeItem(inputArr, 6); document.getElementById("output").innerHTML = inputArr;

 <p id="output"></p>

Answer 1

Issue is related to the sibling 97s - 1, 32, 97, 97, 6 . When you splice the first 97 in this order, the next 97 changes it's index and goes into the first one. but variable i is tracking after that item.

When you remove an item, decrease the index via --i .

Also you can do it via filter function. This will create a new array and you just need to return it. Here I have created and object with input array and a function which filters the input and returns the current object. This will let you to cascade the functions which I think is beautiful from the code style and can help you in something.

 const obj = { input: [3, 97, 32, 6, 97, 2, 9,32, 1, 32, 97, 97, 6, -1, 5], removeItem(item) { this.input = this.input.filter(i => i !== item); return this; } } const output = obj.removeItem(97) .removeItem(32) .removeItem(6); console.log(output.input);

Answer 2

While you mutating the array and you increment the index on splicing as well, you could take another approach and start from the end of the array. That means the following items are still available at their original index and could be checked and spliced if necessary, without leaving some unspliced values.

 function removeItem(array, item) { var i = array.length; while (i--) { if (array[i] === item) { array.splice(array.indexOf(item), 1); } } } var inputArr = [3, 97, 32, 6, 97, 2, 9, 32, 1, 32, 97, 97, 6, -1, 5]; removeItem(inputArr, 97); removeItem(inputArr, 32); removeItem(inputArr, 6); console.log(inputArr);

Answer 3

When you delete one element you also have to decrease the value of i .

Why this ?

Because splice method changes the contents of an array and the indexes of elements are also changed. So, when you need to remove consecutive 97 elements from your array, you have to decrease the value of i .

When you remove the first 97 element from your array, the next 97 element changes it's index, but i is keeping increase.

 var inputArr = [3, 97, 32, 6, 97, 2, 9,32, 1, 32, 97, 97, 6, -1, 5]; function removeItem(array, item) { for(i = 0; i<array.length; i++){ if(array[i] == item) { array.splice(array.indexOf(item), 1); i--; } } } removeItem(inputArr, 97); removeItem(inputArr, 32); removeItem(inputArr, 6); document.getElementById("output").innerHTML = inputArr;

 <p id="output"></p>

For a more easy solution, you can use filter method by passing a callback function as parameter.

 var inputArr = [3, 97, 32, 6, 97, 2, 9,32, 1, 32, 97, 97, 6, -1, 5]; function removeItem(array, item) { return array.filter(i => i !== item); } inputArr = removeItem(inputArr, 97); inputArr = removeItem(inputArr, 32); inputArr = removeItem(inputArr, 6); console.log(inputArr);

Answer 4

Use filter

const newArray = inputArr.filter(element => ![97, 32, 6].includes(element));

What filter does is that it created a new array . To determine what should be in the new array , it needs to go through each element in the old array, and if the we return true for the current element then it is added to the new array .

element => ![97, 32, 6].includes(element) means that we are asking if the array [97, 32, 6] has the value of the current element . And since we don't want to add it to the list, then we write ! in front of the line, because we want the opposite to happen.

Answer 5

Kinda tricky

So when you get a match, you do splice() and hence (i+1)th element comes to i. But next iteration start from i+1 so It doesn't match ith element (which was i+1th element).

Here last two 97 are continuous hence only 1 is matched.

Try this -

function removeItem(array, item) {
    for(i = 0; i<array.length; i++){
        if(array[i] == item) {
            array.splice(array.indexOf(item), 1);
            i--;
        }
    }
}

Answer 6

after splice you have to decrease i with 1.

array.splice(array.indexOf(item), 1);
i--;

Answer 7

The problem is your modification while a for-loop is being executed, the elements' index is modified as well.

A better approach is the use of .filter() function.

Look at this code snippet

 var inputArr = [3, 97, 32, 6, 97, 2, 9, 32, 1, 32, 97, 97, 6, -1, 5]; function removeItem(array, item) { return array.filter((i) => i !== item); } inputArr = removeItem(inputArr, 97); inputArr = removeItem(inputArr, 32); inputArr = removeItem(inputArr, 6); document.getElementById("output").innerHTML = inputArr;

 <p id="output"></p>

See? the array was filtered.

Resource

• Array.prototype.filter()

Answer 8

This is an ES5 version and works faster, especially when the array is sparse

 function removeAll( array, item ) { for (var i = 0; (i = array.indexOf(item, i)) >= 0; array.splice(i, 1)); } var inputArr = [3, 97, 32, 6, 97, 2, 9, 32, 1, 32, 97, 97, 6, -1, 5]; removeAll(inputArr, 97); removeAll(inputArr, 32); removeAll(inputArr, 6); console.log(inputArr);

Answer 9

you should add i-- like this

var inputArr = [3, 97, 32, 6, 97, 2, 9, 32, 1, 32, 97, 97, 6, -1, 5];

function removeItem(array, item) {
    for (i = 0; i < array.length; i++) {
        if (array[i] == item) {
            array.splice(array.indexOf(item), 1);
            i--;
        }
    }
}
removeItem(inputArr, 97);
removeItem(inputArr, 32);
removeItem(inputArr, 6);

document.getElementById('output').innerHTML = inputArr;