Question

我想存储图块（50x50像素的矩形，然后在画布上显示它们），但是不知道我应该使用哪种数据结构。我需要通过x,y值访问它，还需要通过更改x,y值来移动它们。

单个对象看起来像这样：

tile = { x:1, y:2, color:1 }

我需要数百个。

我已经考虑过简单数组，但是tiles[id].x是访问它们的唯一方法，因此我需要首先了解ID，然后才能访问它们x。

2D数组似乎更好，因为我可以制作tiles[y][x]，但是如果更改了坐标，则显示图块的x,y坐标的值不一定是相同的数字。 aka：tile[1][2].x = 1.5因此，访问x = 1.5处的图块变得很棘手。

对象中的对象本质上与数组存在相同的问题，因为它需要具有键，因此：tiles = { tile1:{x:1,y:2,color:1}, tile2:{x:3,y:4,color:2} }仍无法访问x1,y2处的图块，而无需知道其在tile1下键。

我知道我可以使用以上任何一种，loop都可以通过它们，直到找到密钥为止，但这真的是唯一的解决方案吗？我今天一直在阅读有关javascript类的教程，似乎有点像我所需要的，但是没有找到相关的示例。

通过x，y坐标存储和访问图块对象的最佳方法是什么？

Answer 1

如果您希望O(1)（又称“非常快”）的查找时间，唯一的选择是使用哈希表，其哈希键为x和y：

const map = new Map;

for(const tile of tiles)
  map.set(tile.x + "|" + tile.y, tile);

例如在x = 5，y = 6就是这样：

map.get(5 + "|" + 6)

但是，移动磁贴时，还必须将其移动到哈希表中：

function moveTile(tile, toX, toY) {
   map.delete(tile.x + "|" + tile.y);
   tile.x = toX; tile.y = toY;
   map.set(tile.x + "|" + tile.y, tile);
}

Answer 2

将所有图块放入数组中，然后使用array.filter获取所需的图块。像这样：

var tilesFilter = function(x,y) {
  return this.x == 1 && this.y == 2;
}

var tiles = [...];
var myTile = tiles.filter(tilesFilter)[0];