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..

forEach goes through the entire array, no matter what. Try adding an if expression around the 3 lines of code inside that function that checks for your desired range in $tile.posX — Joe Simmons
– Joe Simmons, Commented Nov 17, 2013 at 15:34

p.s.w.g · Accepted Answer · 2013-11-17 15:35:47Z

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; } }

Nice, thanks for .filter. But you think the for loop is more efficient ?
@ClémentAndraud for loops are generally more efficient because calling a function is expensive
Can you demonstrate the improved efficiency of the for loop as opposed to the filter().forEach() array-methods, wiht a JS Perf, maybe?
@ClémentAndraud .filter loops through every item in tiles and constructs a new array, then .forEach loops through every item in the result array. Using a simple for-loop saves you from having to construct the new array or unnecessary function calls.

Collectives™ on Stack Overflow

Javascript foreach with condition

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related