Javascript foreach with condition

Question

Here you can see my code :

this.tiles.forEach ( function($tile)
    {
            $tile.content.x = ( $tile.posY - $tile.posX ) * ($tile.map.tilesWidth/2) + ($tile.offsetX + $tile.map.offsetX);
            $tile.content.y = ( $tile.posY + $tile.posX ) * ($tile.map.tilesHeight/2) + ($tile.offsetY + $tile.map.offsetY);

            $tile.content.tile = $tile;
    });

So, for each tile in my array tiles i do some calculs.

Each item in my array have an attribut posX and posY.

My probleme here it's if i have a lots of tiles in my array, this foreach take a long time to execute.

I need to add a condition and do this stuff for each tile where posX is between Xmin and Xmax, same thing for posY.

How can i do that as simply as possible? To save the greatest possible resource.. thanks !

Add a if condition in my array is not a good solution cause the foreach will still go through the whole array..

Solution

You could use the filter method:

this.tiles
    .filter ( function($tile)
    {
            return $tile.posX <= Xmin && $tile.posX >= Xmax && 
                   $tile.posY <= Ymin && $tile.posY >= Ymax;
    })
    .forEach ( function($tile)
    {
            $tile.content.x = ( $tile.posY - $tile.posX ) * ($tile.map.tilesWidth/2) + ($tile.offsetX + $tile.map.offsetX);
            $tile.content.y = ( $tile.posY + $tile.posX ) * ($tile.map.tilesHeight/2) + ($tile.offsetY + $tile.map.offsetY);

            $tile.content.tile = $tile;
    });

But a simple for-loop would be more efficient:

for (var i = 0; i < this.tiles.length; i++)
{
    var $tile = this.tiles[i];
    if ($tile.posX <= Xmin && $tile.posX >= Xmax && 
        $tile.posY <= Ymin && $tile.posY >= Ymax)
    {
        $tile.content.x = ( $tile.posY - $tile.posX ) * ($tile.map.tilesWidth/2) + ($tile.offsetX + $tile.map.offsetX);
        $tile.content.y = ( $tile.posY + $tile.posX ) * ($tile.map.tilesHeight/2) + ($tile.offsetY + $tile.map.offsetY);

        $tile.content.tile = $tile;
    }
}