JavaScript -- trying to use a loop to delete certain items in an array, but it deletes all items

Question

I first tried a forEach loop to delete items from an array, but later learned that you shouldn't do this. So I tried to make one with a normal for loop. This is to cycle through an array containing bullets, and delete them when they go outside the game area.

for (i = 0; i < playerBullets.length; i++) {
console.log(playerBullets[i].x);
console.log(playerBullets[i]);
if (playerBullets[i].x > 800 || playerBullets[i].x < 0 || playerBullets[i].y > 600 || playerBullets[i].y < 0 ) {
playerBullets.splice(i);
}
}

The console correctly shows [i] in full, and brings up a list of all contents of the array. However, the [i].x console log only displays one value, rather than the "x" value of each object in the array.

Then as soon as the first bullet goes out of bounds, all bullets disappear. Most frustrating, and highly ineffective for killing zombies.

I have also tried looping backwards through the loop, which seems to be the recommended way but it tells me that i is undefined.

Any ideas? I feel like I'm making a very simple error, because I'm using the same structure as the code on tutorial sites, so it "should work".

Thank you!

nnnnnn · Accepted Answer · 2013-05-18 21:54:05Z

4

You should be passing two parameters to the .splice() method, the start index (which you're doing) and the number of elements to delete (which you're not doing):

playerBullets.splice(i, 1);

The reason looping backwards is a good idea is that if you remove an item from the middle of the array while looping through the array then your index i will be out of sync - the index of each item after the removed one decreases by 1 so on your next loop iteration with i++ you skip over the element after the removed one. If looping forwards you'd need to decrease i by 1 after deleting an item. If looping backwards this isn't a problem.

I'm guessing you got undefined when trying to loop backwards because you started from playerBullets.length, which is 1 more than the index of the last item. You need to start from playerBullets.length - 1 and go down to 0:

for (i = playerBullets.length - 1; i >= 0; i--) {
  if (playerBullets[i].x > 800 || playerBullets[i].x < 0 || playerBullets[i].y > 600 || playerBullets[i].y < 0 ) {
    playerBullets.splice(i, 1);
  }
}

edited May 18, 2013 at 21:54

answered May 18, 2013 at 21:24

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FlyingLizard Over a year ago

Everything you said was true, yes I did use .length and not .length - 1. I can't believe I missed the extra parameter for splice, I must have looked over that loop 50 times looking for mistakes. Anyway thanks nnnnnnnnnnnnn!

gion_13 · Accepted Answer · 2013-05-18 21:25:09Z

1

add another argument to splice : array.splice(i, howMany);

Here's more info on splice :

If no howMany parameter is specified , all elements after index are removed.

answered May 18, 2013 at 21:25

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

1 Comment

FlyingLizard Over a year ago

Yep, obvious rookie mistake just as I suspected. Thanks dude.

Collectives™ on Stack Overflow

JavaScript -- trying to use a loop to delete certain items in an array, but it deletes all items

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related