掌握 JavaScript 中的 JSON 处理：解析和字符串化-js教程-PHP中文网

掌握 JavaScript 中的 JSON 处理：解析和字符串化

碧海醫心

发布： 2024-12-17 22:43:23

原创

1081人浏览过

掌握 javascript 中的 json 处理：解析和字符串化

JavaScript JSON 处理：解析与字符串化详解

JSON (JavaScript 对象表示法) 是一种轻量级的数据交换格式，易于人类阅读和编写，也易于机器解析和生成。JavaScript 内置方法可实现 JSON 字符串与 JavaScript 对象的相互转换。

1. 解析 JSON 字符串

JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver]);

登录后复制

text：待解析的 JSON 字符串。
reviver (可选)：一个函数，用于在返回解析后的对象之前对其进行转换。

示例

a. 简单解析

const jsonString = '{"name": "john", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // 输出：john
console.log(parsedData.age);  // 输出：30

登录后复制

b. 使用 reviver 函数

立即学习“Java免费学习笔记（深入）”；

reviver 函数用于自定义解析过程。

const jsonString = '{"name": "john", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // 将出生年份转换为年龄
  }
  return value;
});
console.log(parsedData.birthYear); // 输出：34

登录后复制

错误处理

务必使用 try...catch 块处理无效 JSON。

const invalidJson = "{name: 'john', age: 30}"; // 无效 JSON (键必须加引号)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("无效 JSON:", error.message);
}

登录后复制

2. 字符串化 JavaScript 对象

JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

语法

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

登录后复制

value：待字符串化的对象。
replacer (可选)：一个函数或数组，用于过滤属性。
space (可选)：添加缩进以提高可读性。

示例

a. 简单字符串化

const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // 输出：{"name":"john","age":30}

登录后复制

b. 使用 replacer 函数

replacer 函数用于过滤或转换对象的属性。

const data = { name: "john", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // 排除密码
  return value;
});
console.log(jsonString); // 输出：{"name":"john","age":30}

登录后复制

c. 添加缩进

space 参数用于格式化输出。

const data = { name: "john", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// 输出：
// {
//   "name": "john",
//   "age": 30
// }

登录后复制

错误处理

对象中的循环引用会导致 JSON.stringify() 抛出错误。

3. 应用场景

a. 向服务器发送数据

将 JavaScript 对象转换为 JSON 字符串后再发送到 HTTP 请求中。

const data = { name: "john", age: 30 };
fetch("https://example.com/api", {
  method: "post",
  headers: { "content-type": "application/json" },
  body: JSON.stringify(data)
});

登录后复制

b. 本地存储

使用 localStorage 以 JSON 格式保存和检索数据。

const data = { name: "john", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // 保存数据

const userData = JSON.parse(localStorage.getItem("user")); // 检索数据
console.log(userData.name); // 输出：john

登录后复制

c. 深拷贝对象

使用 JSON 方法创建对象的深拷贝 (不适用于函数或循环引用)。

4. JSON 与 JavaScript 对象的差异

JSON	JavaScript 对象
文本格式 (字符串)	内存数据结构
键必须是字符串 (带引号)	键可以是字符串或 Symbol
无法存储方法/函数	可以存储方法/函数