js如何读取修改json文件

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; // 删除属性

正文

js如何读取修改json文件

JavaScript 读取与修改 JSON 文件的完整指南

JSON 文件基础：什么是 JSON？

浏览器环境：前端读取与修改 JSON 文件

读取用户选择的 JSON 文件

示例代码：

说明：

修改 JSON 数据并提示用户保存

示例代码（续接上文）：

说明：

Node.js 环境：后端读取与修改 JSON 文件

同步方式读取与修改 JSON 文件

示例代码：

说明：

异步方式读取与修改 JSON 文件（推荐）

示例代码：

相关阅读

怎么使用json修改植物大战僵尸

json都了解什么面试

数组如何转化为json

js如何读取修改json文件

发表评论取消回复

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

目录[+]