js如何读写json

JavaScript中JSON数据的读写全解析

在Web开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读易写、结构简洁的特性，已成为前后端数据交互的主流格式，JavaScript作为前端开发的核心语言，提供了原生API支持JSON数据的读写操作，本文将详细介绍JavaScript中JSON数据的解析（读）和序列化（写）方法，并通过实例代码帮助读者快速核心技巧。

JSON简介：什么是JSON？

JSON是一种基于JavaScript对象语法的文本格式,它独立于编程语言，支持多种语言解析和生成，JSON数据以键值对的形式组织，结构类似于JavaScript对象，但有以下严格规则：

• 键必须使用双引号（）包裹，值可以是字符串、数字、布尔值、数组、对象或null；
• 数据以大括号（）包裹对象，以方括号（[]）包裹数组；
• 键值对之间用逗号（）分隔，最后一个键值对后不能有逗号。

示例JSON数据：

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  },
  "nullValue": null
}

读取JSON数据：将JSON字符串转换为JavaScript对象

在JavaScript中,读取JSON数据通常指将JSON格式的字符串转换为JavaScript原生对象（如Object、Array），以便操作数据，核心方法是JSON.parse()。

JSON.parse()：解析JSON字符串

JSON.parse()是JavaScript内置的全局方法，用于将JSON字符串解析为对应的JavaScript值。

语法

JSON.parse(text[, reviver])

• text：必需，要解析的JSON字符串。
• reviver：可选，转换函数，可在解析前对值进行预处理，返回转换后的值。

示例：基本解析

const jsonString = '{"name": "李四", "age": 30, "hobbies": ["阅读", "旅行"]}';
// 解析为JavaScript对象
const obj = JSON.parse(jsonString);
console.log(obj); // 输出: { name: '李四', age: 30, hobbies: ['阅读', '旅行'] }
console.log(obj.name); // 输出: 李四
console.log(obj.hobbies[0]); // 输出: 阅读

示例：使用reviver函数预处理数据

假设JSON字符串中的时间戳需要转换为Date对象，可通过reviver实现：

const jsonWithDate = '{"created": "2023-10-01T12:00:00Z", "id": 1}';
const objWithDate = JSON.parse(jsonWithDate, (key, value) => {
  if (key === 'created') {
    return new Date(value); // 将时间字符串转为Date对象
  }
  return value;
});
console.log(objWithDate.created); // 输出: 2023-10-01T12:00:00.000Z (Date对象)
console.log(objWithDate.created instanceof Date); // 输出: true

注意事项

• JSON.parse()要求数据格式严格符合JSON规范，否则会抛出SyntaxError，键使用单引号、尾随逗号、注释等都会导致解析失败。
• 避免直接解析不可信的JSON字符串,可能存在安全风险（如注入恶意代码）。

写入JSON数据：将JavaScript对象转换为JSON字符串

写入JSON数据指将JavaScript对象（或值）转换为JSON格式的字符串，通常用于发送数据到服务器或存储到本地，核心方法是JSON.stringify()。

JSON.stringify()：序列化JavaScript对象

JSON.stringify()是JavaScript内置的全局方法，用于将JavaScript值转换为JSON字符串。

语法

JSON.stringify(value[, replacer[, space]])

• value：必需，要序列化的JavaScript值（对象、数组、基本类型等）。
• replacer：可选，可以是函数或数组，用于控制哪些属性被序列化。
• space：可选，缩进空白字符串，用于格式化输出，提高可读性。

示例：基本序列化

const obj = {
  name: "王五",
  age: 28,
  isMarried: false,
  skills: ["JavaScript", "Python"]
};
// 序列化为JSON字符串
const jsonString = JSON.stringify(obj);
console.log(jsonString); 
// 输出: {"name":"王五","age":28,"isMarried":false,"skills":["JavaScript","Python"]}

示例：使用replacer过滤属性

情况1：replacer为数组

指定需要序列化的属性名（白名单）：

const user = {
  id: 101,
  password: "123456", // 敏感信息，不希望序列化
  profile: {
    nickname: "前端开发者",
    email: "user@example.com"
  }
};
// 只序列化id和profile.nickname
const filteredJson = JSON.stringify(user, ['id', 'profile', 'nickname']);
console.log(filteredJson); 
// 输出: {"id":101,"profile":{"nickname":"前端开发者"}}

情况2：replacer为函数

对每个属性值进行预处理,返回undefined则删除该属性：

const data = {
  name: "赵六",
  salary: 8000,
  bonus: 2000,
  isHidden: true
};
// 过滤掉isHidden属性，并将salary+bonus作为totalSalary
const processedJson = JSON.stringify(data, (key, value) => {
  if (key === 'isHidden') {
    return undefined; // 删除该属性
  }
  if (key === 'salary') {
    return { base: value, bonus: data.bonus }; // 重组salary结构
  }
  return value;
});
console.log(processedJson); 
// 输出: {"name":"赵六","salary":{"base":8000,"bonus":2000}}

示例：使用space格式化输出

space可以是数字（1-10，表示缩进空格数）或字符串（如"\t"制表符）：

const complexObj = {
  user: "小明",
  details: {
    age: 22,
    hobbies: ["篮球", "音乐"]
  }
};
// 使用数字缩进（2个空格）
const prettyJson1 = JSON.stringify(complexObj, null, 2);
console.log(prettyJson1);
/* 输出:
{
  "user": "小明",
  "details": {
    "age": 22,
    "hobbies": [
      "篮球",
      "音乐"
    ]
  }
}
*/
// 使用制表符缩进
const prettyJson2 = JSON.stringify(complexObj, null, '\t');
console.log(prettyJson2);
/* 输出:
{
    "user": "小明",
    "details": {
        "age": 22,
        "hobbies": [
            "篮球",
            "音乐"
        ]
    }
}
*/

注意事项

• JSON.stringify()会忽略JavaScript对象中的函数、undefined、Symbol类型的属性。
• 循环引用的对象（如obj.a = obj）会导致序列化失败，抛出TypeError。

实战案例：本地存储与读取JSON数据

结合localStorage（浏览器本地存储），演示JSON数据的读写：

存储用户数据到本地

const userData = {
  username: "john_doe",
  loginTime: new Date().toISOString(),
  preferences: {
    theme: "dark",
    language: "zh-CN"
  }
};
// 序列化后存储
localStorage.setItem('user', JSON.stringify(userData));
console.log("用户数据已存储到localStorage");

从本地读取并解析用户数据

// 从localStorage获取数据
const storedJson = localStorage.getItem('user');
// 解析为JavaScript对象
const storedUser = JSON.parse(storedJson);
console.log("读取到的用户数据:", storedUser);
console.log("用户名:", storedUser.username);
console.log("登录时间:", new Date(storedUser.loginTime).toLocaleString());
console.log("主题偏好:", storedUser.preferences.theme);

更新本地数据（先读取、修改、再存储）

// 修改语言偏好
storedUser.preferences.language = "en-US";
// 重新序列化并存储
localStorage.setItem('user', JSON.stringify(storedUser));
console.log("用户数据已更新:", JSON.parse(localStorage.getItem('user')));

常见问题与解决方案

解析包含单引号的JSON字符串时出错

问题：`JSON.parse('{'name': '