带有条件的 Javascript foreach

Question

在这里你可以看到我的代码：

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

所以，对于我的数组tiles 中的每个图块，我都会进行一些计算。

我的数组中的每个项目都有一个属性posX 和posY。

我的问题是如果我的数组中有很多图块，这个 foreach 需要很长时间才能执行。

我需要为 posX 介于 Xmin 和 Xmax 之间的每个图块添加条件并执行此操作，对于 posY 也是如此。

我怎样才能尽可能简单地做到这一点？为了节省尽可能多的资源......谢谢！

在我的数组中添加一个 if 条件不是一个好的解决方案，因为 foreach 仍然会遍历整个数组..

Answer 1

您可以使用filter 方法：

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

但是一个简单的for-loop 会更有效：

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