支持负索引的可JSON序列化2D网格存储方案问询

嘿，这个问题我之前也碰到过，刚好有几个完全原生、不用写自定义序列化/反序列化器的办法，完美适配你的需求：

方案一：字符串化坐标作为对象键 #

这是最直接的方案——把你的二维坐标（比如x=-2, y=3）转成统一格式的字符串（比如"-2,3"），作为普通JS对象的键来存储对应单元格的数据。JSON对字符串键的对象序列化/反序列化完全原生支持，而且不管正负索引都能搞定。

示例代码：

// 初始化网格
const grid = {
  "-2,3": { type: "wall", health: 100 },
  "1,-1": { type: "player", score: 50 }
};

// 原生序列化
const serialized = JSON.stringify(grid);
// 原生反序列化
const parsedGrid = JSON.parse(serialized);

// 读取指定坐标的单元格
const getCell = (x, y) => parsedGrid[`${x},${y}`];
const playerCell = getCell(1, -1); // 拿到{ type: "player", score: 50 }

注意点：要保持坐标字符串的格式统一（比如不要混用"x,y"和"x:y"），避免读取时出错。

方案二：用数组存储坐标-值对列表 #

把每个单元格包装成包含x、y坐标和数据的对象，然后整个网格用一个数组存储。这种方式结构清晰，JSON完全支持，唯一的小缺点是大规模网格查找时需要遍历数组，但普通规模下完全够用。

示例代码：

// 初始化网格
const grid = [
  { x: -2, y: 3, data: { type: "wall", health: 100 } },
  { x: 1, y: -1, data: { type: "player", score: 50 } }
];

// 序列化/反序列化
const serialized = JSON.stringify(grid);
const parsedGrid = JSON.parse(serialized);

// 查找指定坐标的单元格
const findCell = (x, y) => parsedGrid.find(item => item.x === x && item.y === y);
const wallCell = findCell(-2, 3); // 拿到对应的单元格对象

如果需要优化查找效率，可以在反序列化后临时构建一个Map（用[x,y]作为键）来快速查询，不用把Map存到JSON里就行。

方案三：偏移索引到非负整数（适合已知索引范围的场景） #

如果你的网格索引范围是固定的（比如x从-10到10，y从-10到10），可以给每个坐标加一个偏移量，把负索引转成非负整数，这样就能用原生二维数组存储了。数组的序列化/反序列化也是完全原生支持的。

示例代码：

// 假设索引范围是-10到10，偏移量设为10
const OFFSET = 10;
// 初始化一个21x21的二维数组（-10+10=0，10+10=20，共21个位置）
const grid = Array.from({ length: 21 }, () => Array(21).fill(null));

// 存储x=-2,y=3的单元格
grid[-2 + OFFSET][3 + OFFSET] = { type: "wall", health: 100 };

// 序列化/反序列化
const serialized = JSON.stringify(grid);
const parsedGrid = JSON.parse(serialized);

// 读取单元格
const getCell = (x, y) => parsedGrid[x + OFFSET][y + OFFSET];
const wallCell = getCell(-2, 3); // 拿到对应数据

这个方案的优势是数组访问效率极高，适合大规模网格，但前提是你必须提前知道索引的上下限。

内容的提问来源于stack exchange，提问作者fis