javascript - Remove array item using for...of loop - Stack Overflow

admin管理员组

文章数量:1200781

I'm trying to edit an array and remove elements that do not meet a certain condition. If I use a reverse for loop combined with .splice(index,n), the code works just fine. I'm stuck at implementing the same using the ES6 for...of loop

let array=[1,2,3];
//reverse for loop
for(var i=array.length - 1; i>=0; i--) {
  if(array[i]>=2) {
    /*Collect element before deleting it.*/
    array.splice(i,1);
  }
} 
console.log(array);
// returns [1]

Using for..of

let array=[1,2,3];
for(let entry of array) {
    if(entry>=2) {
        let index = array.indexOf(entry);

        /*The array is being re-indexed when I apply 
        .splice() - the loop will skip over an index
        when one element of array is removed*/

        array.splice(index, 1);
    }
} 
console.log(array);
//returns [1,3]

Is there a way to achieve this functionality using a for...of loop or do I have to stick to the reverse for loop

Update
I need to collect the entries that don't meet the elements removed by either the filter() or reverse for loop functions to a secondary array.

I'm trying to edit an array and remove elements that do not meet a certain condition. If I use a reverse for loop combined with .splice(index,n), the code works just fine. I'm stuck at implementing the same using the ES6 for...of loop

let array=[1,2,3];
//reverse for loop
for(var i=array.length - 1; i>=0; i--) {
  if(array[i]>=2) {
    /*Collect element before deleting it.*/
    array.splice(i,1);
  }
} 
console.log(array);
// returns [1]

Using for..of

let array=[1,2,3];
for(let entry of array) {
    if(entry>=2) {
        let index = array.indexOf(entry);

        /*The array is being re-indexed when I apply 
        .splice() - the loop will skip over an index
        when one element of array is removed*/

        array.splice(index, 1);
    }
} 
console.log(array);
//returns [1,3]

Is there a way to achieve this functionality using a for...of loop or do I have to stick to the reverse for loop

Update
I need to collect the entries that don't meet the elements removed by either the filter() or reverse for loop functions to a secondary array.

• javascript
• loops
• for-of-loop

Share Improve this question Follow edited Sep 2, 2019 at 11:36 danieln asked Sep 2, 2019 at 8:16 danielndanieln 51322 gold badges55 silver badges2121 bronze badges 4

• Don't use splice while looping over array, as it mutates original array – Code Maniac Commented Sep 2, 2019 at 8:17
• 4 Very convoluted. Use .filter instead, much easier – CertainPerformance Commented Sep 2, 2019 at 8:17
• filter is exactly what you need. It's a bad practice to mutate an array you're iterating on. – Florian Commented Sep 2, 2019 at 8:19
• "If I use a reverse for loop combined with .splice(index,n), the code works just fine." That is the correct way to do it. You could also use while like this – adiga Commented Sep 2, 2019 at 8:22

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 13

You can't reasonably use for-of for this. If you remove the "current" entry during the iteration, you'll skip the next entry, because of the way array iterators are specified (they use the index of the entry). You can see that with this contrived example:

const array = [1, 2, 3];
for (const entry of array) {
    console.log(entry);
    if (entry === 2) {
        array.splice(1, 1);
    }
}
console.log(array);

Notice how there was no loop iteration for entry 3.

I'd suggest either sticking with your reverse for loop or using filter to produce a new array containing only the entries you want to keep.

Using filter:

let array = [1, 2, 3];
array = array.filter(entry => entry < 2);
console.log(array);

---

I said "reasonably" above because, of course, there's always a way. You could loop through a copy of the array and maintain the index outside it:

const array = [1, 2, 3];
let index = 0;
for (const entry of [...array]) {
    if (entry >= 2) {
        array.splice(index, 1);
    } else {
        ++index;
    }
}
console.log(array);

That doesn't seem reasonable compared to the alternatives, unless of course there are constraints pushing you that way. :-)

According to @T.J's answer, when using a for...of loop:

If you remove the "current" entry during the iteration, you'll skip the next entry, because of the way array iterators are specified (they use the index of the entry).

This leaves two other options, using a reverse for loop and a filter function. I mentioned earlier that I need to do an operation with the current array element before deleting it.

1. Using .filter() function
and referring to @T.J's Comment

let array = [1,2,3];
let collection = [];

array = array.filter(function(entry) {
    if(entry>=2) {
        collection.push(entry);
    } 
    return entry <2;
});

console.log(collection); //returns [2,3]
console.log(array); //returns [1]

2. Using a reverse for loop

let array = [1,2,3];
let collection = [];

for(var i=array.length - 1; i>=0; i--) {
  if(array[i]>=2) {
     collection.push(array[i]);
     array.splice(i,1);
  }
}

console.log(collection); //returns [2,3]
console.log(array); //returns [1] 

The filter() function in this case requires an additional step to temporarily hold the elements that do not meet the condition. The reverse for loop offers a more cleaner way to achieve the same.

iterator skips the next entry on removing current entry in the array. So you should this way to achieve your desired result.

let array = [1,2,3];
let array_new = [1,2,3];
for(let entry of array) {
if(entry>=2) {
    let index = array_new.indexOf(entry);
    array_new.splice(index, 1);
}
} 
console.log(array_new);
//returns [1]

本文标签： javascriptRemove array item using forof loopStack Overflow