js如何处理json

JavaScript 与 JSON 的完美邂逅：处理 JSON 的全面指南**

JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，以其易读易写、简洁明了的特性，在 Web 开发中占据了举足轻重的地位，作为 JavaScript 的一个子集，JSON 与 JavaScript 语言的天然亲和性，使得在 JavaScript 中处理 JSON 数据变得异常便捷，本文将全面介绍 JavaScript 如何处理 JSON，包括解析、序列化以及实际应用中的注意事项。

什么是 JSON？

我们需要明确 JSON 是什么，JSON 是一种基于文本的数据格式，它采用类似于 JavaScript 对象字面量的语法来表示数据，一个典型的 JSON 对象如下：

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

JSON 的结构简单,主要由两种结构组成：

对象：用花括号表示，是一组无序的键值对集合，键必须是字符串，值可以是字符串、数字、布尔值、数组、对象或 null。
数组：用方括号 [] 表示，是一组有序的值的集合,值可以是上述提到的各种类型。

将 JSON 字符串解析为 JavaScript 对象（JSON.parse）

当我们从服务器接收到数据或从本地存储中读取数据时，这些数据通常都是以 JSON 字符串的形式存在的，为了在 JavaScript 中操作这些数据，我们需要将其解析（Parse）为 JavaScript 对象或数组，这时，JSON.parse() 方法就派上用场了。

语法： JSON.parse(text[, reviver])

text: 必需，要被解析的 JSON 字符串。
reviver: 可选，一个转换函数，会在每个键值对解析前调用,可以用来转换或过滤值。

示例：

const jsonString = '{"name": "李四", "age": 25, "hobbies": ["reading", "gaming"]}';
// 使用 JSON.parse 将 JSON 字符串解析为 JavaScript 对象
const jsObject = JSON.parse(jsonString);
console.log(jsObject); // 输出: { name: '李四', age: 25, hobbies: [ 'reading', 'gaming' ] }
console.log(jsObject.name); // 输出: 李四
console.log(jsObject.hobbies[0]); // 输出: reading
// 使用 reviver 函数
const jsonStringWithDate = '{"name": "王五", "birthDate": "1990-01-01"}';
const jsObjectWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
  if (key === 'birthDate') {
    return new Date(value); // 将日期字符串转换为 Date 对象
  }
  return value;
});
console.log(jsObjectWithDate.birthDate); // 输出: 1990-01-01T00:00:00.000Z (Date 对象)

注意事项：

JSON.parse() 要求解析的字符串必须是合法的 JSON 格式，否则会抛出 SyntaxError。
JSON 中的键必须用双引号包起来，JavaScript 对象字面量中的单引号是不被 JSON.parse() 识别的。
JSON 不支持 JavaScript 中的 undefined、函数、Symbol 等类型。

将 JavaScript 对象/数组序列化为 JSON 字符串（JSON.stringify）

当我们需要将 JavaScript 对象或数组发送到服务器，或者将其存储在本地存储（localStorage/sessionStorage）中时，我们需要将其转换为 JSON 字符串，这个过程称为序列化（Stringify）。JSON.stringify() 方法就是用来完成这个任务的。

语法： JSON.stringify(value[, replacer[, space]])

value: 必需，要被序列化的 JavaScript 对象或数组。
replacer: 可选，可以是一个函数或数组，用于控制哪些属性被序列化以及如何序列化。
- 如果是函数，则每个键值对都会经过该函数处理,返回的值将被序列化。
- 如果是数组,则只有数组中包含的属性键才会被序列化。
space: 可选，用于美化输出的 JSON 字符串，可以是数字（表示缩进的空格数，最大10）或字符串（用作缩进，最多10个字符）。

示例：

const jsObject = {
  name: "赵六",
  age: 28,
  isMarried: true,
  skills: ["JavaScript", "Python", "React"]
};
// 使用 JSON.stringify 将 JavaScript 对象序列化为 JSON 字符串
const jsonString = JSON.stringify(jsObject);
console.log(jsonString); // 输出: {"name":"赵六","age":28,"isMarried":true,"skills":["JavaScript","Python","React"]}
// 使用 space 进行美化输出
const prettyJsonString = JSON.stringify(jsObject, null, 2);
console.log(prettyJsonString);
/*
输出:
{
  "name": "赵六",
  "age": 28,
  "isMarried": true,
  "skills": [
    "JavaScript",
    "Python",
    "React"
  ]
}
*/
// 使用 replacer 函数过滤属性
const filteredJsonString = JSON.stringify(jsObject, (key, value) => {
  if (key === 'age') {
    return undefined; // 不序列化 age 属性
  }
  return value;
});
console.log(filteredJsonString); // 输出: {"name":"赵六","isMarried":true,"skills":["JavaScript","Python","React"]}
// 使用 replacer 数组指定序列化的属性
const selectedJsonString = JSON.stringify(jsObject, ['name', 'skills']);
console.log(selectedJsonString); // 输出: {"name":"赵六","skills":["JavaScript","Python","React"]}

注意事项：

JSON.stringify() 会忽略对象中的 undefined、函数 和 Symbol 类型的属性。
如果对象中存在循环引用（对象的某个属性指向对象本身），JSON.stringify() 会抛出错误。
对于 Date 对象，JSON.stringify() 会自动将其转换为 ISO 格式的日期字符串。
对于 RegExp 对象、Map、Set 等内置对象，JSON.stringify() 默认将其序列化为或 []（具体取决于对象）,不会保留其结构。

处理 JSON 时的常见问题与最佳实践

错误处理：在使用 JSON.parse() 时，务必使用 try...catch 来捕获可能发生的 SyntaxError,避免程序因解析错误而中断。

let parsedData;
try {
  parsedData = JSON.parse(someJsonString);
} catch (error) {
  console.error("JSON 解析失败:", error);
  parsedData = {}; // 提供一个默认值
}

循环引用：如果对象中存在循环引用，直接使用 JSON.stringify() 会报错，可以借助第三方库（如 flatted、cycle.js）来处理,或者手动在序列化前断开循环引用。
过滤敏感信息：在序列化对象发送到前端或存储时，注意过滤掉敏感信息（如密码、token 等），可以通过 replacer 函数实现。
日期处理：虽然 JSON.stringify() 能处理 Date 对象，但接收方（如果是非 JavaScript 环境）可能无法正确解析，可以约定使用 ISO 字符串，或者在 replacer 中将日期转换为特定格式的字符串,接收方再进行解析。

深拷贝： JSON.stringify 和 JSON.parse 结合使用可以实现对普通 JavaScript 对象的深拷贝（不包含函数、循环引用等）。

const originalObject = { name: "测试", data: { value: 123 } };
const deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.data.value = 456;
console.log(originalObject.data.value); // 输出: 123 (原对象未被修改)

JavaScript 与 JSON 的结合为 Web 数据交换提供了极大的便利。JSON.parse() 和 JSON.stringify() 是处理 JSON 数据的两个核心方法，分别用于将 JSON 字符串转换为 JavaScript 对象和将 JavaScript 对象转换为 JSON 字符串，在实际开发中，我们需要理解它们的用法、参数以及注意事项，如错误处理、循环引用、敏感信息过滤等，以确保数据处理的准确性和安全性，好 JSON 的处理技巧，将能让你在前后端数据交互、数据存储等方面更加得心应手。