Removing an element from a javascript array inside a loop

Question

I have the following code which iterates through a JS array. When I get to a specific element, I want to remove it. I realise that I can use splice, but is there a way that doesn't involve me tracking the index:

    myArray.forEach(function (point) {
        canvasContext.clearRect(point.PointX - 3, point.PointY - 3, 6, 6);
        point.PointY++;
        canvasContext.fillRect(point.PointX - 3, point.PointY - 3, 6, 6);

        if (point.PointY > canvas.height) {
            // Remove point

        }
    });

Other great (better?) solutions than the here given ones: stackoverflow.com/questions/9882284/… — Simon Steinberger
– Simon Steinberger, Commented Aug 4, 2014 at 5:52

Ja͢ck · Accepted Answer · 2013-04-19 16:57:52Z

1

Modifying the array in-place can be tricky, so perhaps Array.filter() is a better function to use:

myArray = myArray.filter(function (point) {
    canvasContext.clearRect(point.PointX - 3, point.PointY - 3, 6, 6);
    point.PointY++;
    canvasContext.fillRect(point.PointX - 3, point.PointY - 3, 6, 6);

    if (point.PointY > canvas.height) {
        return false;
    }
    return true;
});

It returns an array with all elements for which the callback returned true.

edited Apr 19, 2013 at 16:57

answered Apr 19, 2013 at 16:51

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

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

2 Comments

Simon Steinberger Over a year ago

Just a heads-up: I think this doesn't work in IE < 9.

Ja͢ck Over a year ago

@SimonSteinberger The link has a polyfill for browsers that don't support .filter() natively.

Halcyon · Accepted Answer · 2013-04-19 16:41:58Z

0

Use the 2nd parameter to forEach, index and Array.splice:

myArray.forEach(function (point, index) {
    canvasContext.clearRect(point.PointX - 3, point.PointY - 3, 6, 6);
    point.PointY++;
    canvasContext.fillRect(point.PointX - 3, point.PointY - 3, 6, 6);

    if (point.PointY > canvas.height) {
        myArray.splice(index, 1);
    }
});

answered Apr 19, 2013 at 16:41

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Comments

Alex Mcp · Accepted Answer · 2013-04-19 16:50:08Z

0

There's often an issue with loops that change the length of the array being looped over. They will end up 'skipping' an item.

It's typical when you're going to affect the length of the array to count down instead of up, with a loop like this:

for (var i = Things.length - 1; i >= 0; i--) {
  //your code here
};

answered Apr 19, 2013 at 16:50

Alex Mcp

19.4k12 gold badges62 silver badges94 bronze badges

Collectives™ on Stack Overflow

Removing an element from a javascript array inside a loop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related