javascript - 如何通过 x,y 值存储和访问具有 x,y 坐标的对象？

Question

我想存储图 block (50x50 像素矩形，稍后将它们显示在 Canvas 上)，但不知道应该使用什么数据结构。我需要通过 x,y 值访问它，还需要通过更改 x,y 值来移动它们。

单个对象看起来像这样:

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

我需要数百个。

我考虑过简单的数组，但是 tiles[id].x 是访问它们的唯一方法，所以在我之前我需要先知道 ID可以访问它们 x。

二维数组，似乎更好，因为我可以制作 tiles[y][x]，但是显示图 block 的 x,y 坐标的值不是如果坐标改变，则必须是相同的数字。又名:tile[1][2].x = 1.5 因此，访问 x = 1.5 处的磁贴变得棘手。

Objects in objects 本质上与数组有相同的问题，因为它需要有一个键所以:tiles = { tile1:{x:1,y:2,color:1}, tile2:{x: 3,y:4,color:2} 仍然无法在不知道 tile1 键下的情况下访问 x1,y2 处的图 block 。

我知道我可以使用上面的任何方法并循环遍历它们直到找到 key ，但这真的是唯一的解决方案吗？我今天一直在阅读有关 javascript 类的教程，看起来有点像我需要的，但还没有找到相关的例子。

按 x,y 坐标存储和访问图 block 对象的最佳方式是什么？

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)

然而，当移动一个 tile 时，您还必须在哈希表中移动它:

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