如何使用纯JavaScript修改本地JSON文件的属性键名

纯JavaScript操作本地JSON文件不需要额外依赖，分两种常用场景实现：

方案1：Node.js环境批量处理（适合本地文件操作，无需打开浏览器） #

这个方案用Node.js原生的文件系统API，不需要安装任何第三方包。

1. 先把你手里的原始JSON文件保存为data.json，放到单独的文件夹里
2. 在同文件夹下新建脚本文件rename.js，写入以下代码：

const fs = require('fs');
const path = require('path');

// 键名映射规则，和需求一一对应
const keyReplaceRule = {
  _id: 'person_id',
  index: 'idx',
  tags: 'voiceLines'
};

// 读取原JSON文件
const rawContent = fs.readFileSync(path.join(__dirname, 'data.json'), 'utf-8');
const jsonData = JSON.parse(rawContent);

// 遍历每条数据替换键名
const result = jsonData.map(item => {
  const handledItem = {};
  for (const [oldKey, value] of Object.entries(item)) {
    const newKey = keyReplaceRule[oldKey] ?? oldKey;
    handledItem[newKey] = value;
  }
  return handledItem;
});

// 写入处理后的文件，保留2格缩进和原格式一致
fs.writeFileSync(
  path.join(__dirname, 'data-processed.json'),
  JSON.stringify(result, null, 2),
  'utf-8'
);
console.log('处理完成，已生成data-processed.json文件');

3. 确保本地安装了Node.js环境，打开终端进入当前文件夹，执行命令：
   node rename.js
   执行完成后同目录会生成处理好的data-processed.json，核对内容无误后替换原文件即可。

方案2：浏览器端纯前端处理（不需要装Node环境） #

如果不想安装运行环境，可以直接写个简单的HTML页面，在浏览器里完成文件读取、处理、导出全流程：

1. 新建一个process.html文件，写入以下代码：

<input type="file" accept=".json" id="pickFile">
<script>
const keyReplaceRule = {
  _id: 'person_id',
  index: 'idx',
  tags: 'voiceLines'
};

document.querySelector('#pickFile').addEventListener('change', e => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = ev => {
    const data = JSON.parse(ev.target.result);
    const handled = data.map(item => {
      const res = {};
      Object.entries(item).forEach(([k, v]) => {
        res[keyReplaceRule[k] || k] = v;
      })
      return res;
    })
    // 自动下载处理后的文件
    const blob = new Blob([JSON.stringify(handled, null, 2)], {type: 'application/json'});
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'data-processed.json';
    a.click();
    URL.revokeObjectURL(downloadUrl);
  }
  reader.readAsText(file);
})
</script>

2. 直接双击打开这个HTML文件，在页面上选择你本地的原始JSON文件，浏览器会自动下载处理完成的新JSON文件。

注意：需求里提到的id重命名，从给出的原始JSON结构看实际字段名是_id，上面两个方案都已经按实际字段做了映射，不会漏改。

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