JavaScript中棋盘3D数组转JSON存文件及读取还原咨询

嘿，我来帮你搞定这个3D棋盘数组的JSON读写问题～ 核心就是利用JSON的序列化和反序列化能力，但要分浏览器和Node.js两种环境来处理，因为它们的文件操作逻辑不一样，下面详细拆解：

不管哪种环境，第一步都是把JavaScript数组转换成JSON字符串（这个过程叫序列化），之后再根据环境不同把字符串写入文件。

1. Node.js 环境 #

Node.js有内置的fs模块可以直接操作文件，代码示例如下：

const fs = require('fs');

// 先初始化你的3D棋盘数组（和你给出的初始化逻辑对应）
var chessBoard = [];
for(var i = 0; i < 15; i++){
  chessBoard[i] = [];
  for(var j = 0; j < 15; j++){
    // 这里按照你的需求，每个[x][y]对应一个长度为3的数组，代表k=0/1/2的颜色
    chessBoard[i][j] = [0, 0, 0];
  }
}

// 1. 将3D数组序列化为JSON字符串
// 第二个参数`null`表示不需要过滤属性，第三个参数`2`是缩进空格，让JSON文件更易读
const jsonStr = JSON.stringify(chessBoard, null, 2);

// 2. 写入到本地文件
fs.writeFile('chess_board.json', jsonStr, (err) => {
  if (err) {
    console.error('保存失败:', err);
    return;
  }
  console.log('棋盘数据已成功保存到 chess_board.json');
});

2. 浏览器环境 #

浏览器不能直接写入本地文件，所以我们需要生成一个下载链接，让用户主动点击下载：

// 假设chessBoard是已经初始化好的3D数组
const jsonStr = JSON.stringify(chessBoard, null, 2);
// 创建Blob对象存储JSON内容
const blob = new Blob([jsonStr], { type: 'application/json' });
// 生成临时下载链接
const downloadUrl = URL.createObjectURL(blob);

// 创建一个隐藏的a标签触发下载
const aTag = document.createElement('a');
aTag.href = downloadUrl;
aTag.download = 'chess_board.json'; // 设置下载的文件名
document.body.appendChild(aTag);
aTag.click();

// 清理临时资源
document.body.removeChild(aTag);
URL.revokeObjectURL(downloadUrl);

读取的过程和保存相反：先读取文件内容得到JSON字符串，再把字符串转换成JavaScript数组（反序列化）。

1. Node.js 环境 #

同样用fs模块读取文件，再用JSON.parse()转换：

const fs = require('fs');

fs.readFile('chess_board.json', 'utf8', (err, data) => {
  if (err) {
    console.error('读取文件出错:', err);
    return;
  }
  try {
    // 将JSON字符串反序列化为3D数组
    const chessBoard = JSON.parse(data);
    // 现在就能像使用普通数组一样操作chessBoard了
    console.log('读取到的棋盘数据:', chessBoard[0][0]); // 输出第一个坐标的颜色数组
  } catch (parseErr) {
    console.error('JSON解析失败:', parseErr);
  }
});

2. 浏览器环境 #

需要用户通过文件选择器上传JSON文件，然后读取并解析：

首先在HTML里添加一个文件选择器：

<input type="file" id="jsonFileInput" accept=".json">

然后编写JavaScript逻辑：

document.getElementById('jsonFileInput').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    try {
      // 解析JSON字符串为3D数组
      const chessBoard = JSON.parse(event.target.result);
      console.log('转换完成的棋盘数组:', chessBoard);
      // 这里可以继续编写你的棋盘渲染逻辑
    } catch (parseErr) {
      alert('JSON文件格式错误，请检查后重试');
      console.error('解析失败:', parseErr);
    }
  };
  // 以文本形式读取文件
  reader.readAsText(selectedFile);
});

注意事项 #

• JSON本身支持数组结构，所以你的3D数组（数组嵌套数组）可以直接被序列化/反序列化，不需要额外处理格式
• 如果你的数组里有特殊对象（比如自定义类实例），JSON.stringify会把它们转换成普通对象，但你的场景里只有数字数组，完全没问题

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