JavaScript 读取与修改 JSON 文件的完整指南
在 Web 开发中,JSON(JavaScript Object Notation)因其轻量级、易读的特点,成为数据交换的主流格式,无论是前端配置文件、后端 API 响应,还是本地数据存储,都离不开 JSON 文件的操作,本文将详细介绍如何使用 JavaScript 读取和修改 JSON 文件,涵盖浏览器环境(前端)和 Node.js 环境(后端)的不同实现方式,并附实用示例和注意事项。
JSON 文件基础:什么是 JSON?
JSON 是一种基于 JavaScript 对象语法的轻量级数据格式,以键值对(Key-Value Pair)的形式组织数据,结构清晰,易于机器解析和生成,一个典型的 JSON 文件(如 data.json如下:
{
"name": "张三",
"age": 25,
"isStudent": false,
"courses": ["数学", "英语"],
"address": {
"city": "北京",
"district": "海淀区"
}
}
操作 JSON 文件的核心步骤可概括为:读取文件内容 → 解析为 JavaScript 对象 → 修改对象 → 转换回 JSON 字符串 → 写入文件。
浏览器环境:前端读取与修改 JSON 文件
在浏览器端,由于安全限制(同源策略),JavaScript 无法直接读取本地文件系统中的 JSON 文件(用户未主动选择文件的情况下),但通过 <input type="file"> 元素,可以让用户选择文件,进而读取和修改内容,以下是具体步骤:
读取用户选择的 JSON 文件
使用 <input type="file"> 让用户选择文件,通过 FileReader 对象异步读取文件内容。
示例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">JSON 文件读取与修改</title>
</head>
<body>
<input type="file" id="fileInput" accept=".json">
<button id="readBtn">读取文件</button>
<div id="output"></div>
<script>
const fileInput = document.getElementById('fileInput');
const readBtn = document.getElementById('readBtn');
const output = document.getElementById('output');
readBtn.addEventListener('click', () => {
const file = fileInput.files[0];
if (!file) {
alert('请先选择 JSON 文件!');
return;
}
// 检查文件类型是否为 JSON
if (!file.name.endsWith('.json')) {
alert('请选择 .json 格式的文件!');
return;
}
const reader = new FileReader();
reader.onload = (event) => {
try {
// 解析 JSON 字符串为 JavaScript 对象
const jsonData = JSON.parse(event.target.result);
output.innerHTML = `<pre>${JSON.stringify(jsonData, null, 2)}</pre>`;
console.log('读取成功:', jsonData);
} catch (error) {
alert('JSON 文件格式错误:' + error.message);
}
};
reader.onerror = () => {
alert('文件读取失败,请重试!');
};
// 以文本格式读取文件
reader.readAsText(file);
});
</script>
</body>
</html>
说明:
accept=".json":限制用户只能选择 JSON 文件(但仍可绕过,需在代码中二次校验文件类型)。FileReader.readAsText():将文件读取为文本字符串。JSON.parse():将 JSON 字符串解析为 JavaScript 对象(若格式错误会抛出异常)。
修改 JSON 数据并提示用户保存
读取 JSON 数据后,可直接修改 JavaScript 对象,然后将修改后的内容转换回 JSON 字符串,通过 Blob 对象和下载链接让用户保存。
示例代码(续接上文):
<input type="file" id="fileInput" accept=".json">
<button id="readBtn">读取文件</button>
<button id="modifyBtn" style="display: none;">修改数据(年龄+1)</button>
<button id="saveBtn" style="display: none;">保存修改</button>
<div id="output"></div>
<script>
// 前面的代码不变...
const modifyBtn = document.getElementById('modifyBtn');
const saveBtn = document.getElementById('saveBtn');
let jsonData = null; // 存储解析后的 JSON 数据
readBtn.addEventListener('click', () => {
// ... 读取文件的代码 ...
reader.onload = (event) => {
try {
jsonData = JSON.parse(event.target.result);
output.innerHTML = `<pre>${JSON.stringify(jsonData, null, 2)}</pre>`;
modifyBtn.style.display = 'inline-block'; // 显示修改按钮
} catch (error) {
alert('JSON 文件格式错误:' + error.message);
}
};
});
// 修改数据
modifyBtn.addEventListener('click', () => {
if (!jsonData) return;
jsonData.age += 1; // 修改年龄
output.innerHTML = `<pre>${JSON.stringify(jsonData, null, 2)}</pre>`;
saveBtn.style.display = 'inline-block'; // 显示保存按钮
});
// 保存修改
saveBtn.addEventListener('click', () => {
if (!jsonData) return;
const jsonString = JSON.stringify(jsonData, null, 2); // 转换为 JSON 字符串(格式化缩进)
const blob = new Blob([jsonString], { type: 'application/json' });
const url = URL.createObjectURL(blob);
// 创建下载链接
const a = document.createElement('a');
a.href = url;
a.download = 'modified_data.json'; // 下载文件名
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 释放内存
});
</script>
说明:
JSON.stringify():将 JavaScript 对象转换为 JSON 字符串,第二个参数null表示不进行过滤,第三个参数2表示缩进 2 个空格(格式化输出)。Blob:表示二进制数据块,可用于创建文件下载链接。URL.createObjectURL():生成临时下载链接,下载完成后需调用URL.revokeObjectURL()释放内存。
Node.js 环境:后端读取与修改 JSON 文件
在 Node.js 中,可以直接读取服务器或本地文件系统中的 JSON 文件(无需用户手动选择),通过内置的 fs(File System)模块实现,以下是具体步骤:
同步方式读取与修改 JSON 文件
fs.readFileSync() 同步读取文件,阻塞代码执行,适合简单的脚本任务。
示例代码:
const fs = require('fs');
const path = require('path');
// JSON 文件路径(假设与脚本同目录)
const jsonFilePath = path.join(__dirname, 'data.json');
try {
// 1. 同步读取文件内容(字符串)
const fileContent = fs.readFileSync(jsonFilePath, 'utf8');
console.log('原始文件内容:', fileContent);
// 2. 解析为 JavaScript 对象
let jsonData = JSON.parse(fileContent);
console.log('解析后的对象:', jsonData);
// 3. 修改数据
jsonData.age += 1;
jsonData.courses.push('物理');
// 4. 转换回 JSON 字符串并格式化
const newJsonContent = JSON.stringify(jsonData, null, 2);
// 5. 同步写入文件(覆盖原文件)
fs.writeFileSync(jsonFilePath, newJsonContent, 'utf8');
console.log('文件修改成功!');
} catch (error) {
console.error('操作失败:', error.message);
}
说明:
fs.readFileSync(path, options):同步读取文件,'utf8'表示以 UTF-8 编码读取文本文件。fs.writeFileSync(path, data, options):同步写入文件,若文件不存在则创建,存在则覆盖。- 错误处理:使用
try-catch捕获文件不存在、JSON 格式错误等异常。
异步方式读取与修改 JSON 文件(推荐)
Node.js 推荐使用异步 API(如 fs.promises 或回调函数)避免阻塞事件循环,以下是 fs.promises(Promise 版本)的示例:
示例代码:
const fs = require('fs').promises; // 引入 Promise 版本的 fs
const path = require('path');
const jsonFilePath = path.join(__dirname, 'data.json');
async function modifyJsonFile() {
try {
// 1. 异步读取文件
const fileContent = await fs.readFile(jsonFilePath, 'utf8');
console.log('原始文件内容:', fileContent);
// 2. 解析为对象
let jsonData = JSON.parse(fileContent);
// 3. 修改数据
jsonData.isStudent = true;
delete jsonData.address.district; // 删除属性


还没有评论,来说两句吧...