js怎么解析返回的json数据格式化

从入门到精通：JavaScript 解析与格式化 JSON 数据完全指南

在现代 Web 开发中，JSON（JavaScript Object Notation）已成为数据交换的事实标准，无论是从后端 API 获取数据，还是在前端存储配置，JSON 都无处不在，作为一名 JavaScript 开发者，熟练 JSON 数据的解析（读取）和格式化（美化输出）是一项核心技能，本文将带你全面了解如何在 JavaScript 中处理 JSON 数据。

第一部分：解析 JSON 数据 —— 将文本转换为 JavaScript 对象

JSON 的本质是一种轻量级的文本数据格式，JavaScript 无法直接操作这种文本格式的数据，必须先将其转换成原生的 JavaScript 对象或数组，这个过程就叫做“解析”（Parsing）。

核心方法：`JSON.parse()`

JavaScript 提供了内置的 JSON 对象，JSON.parse() 方法是完成这项任务的主力军，它接收一个 JSON 格式的字符串作为参数，并将其转换成一个对应的 JavaScript 对象或数组。

基本语法：

let jsObject = JSON.parse(jsonString);

示例：

假设我们从服务器收到了以下 JSON 字符串：

const jsonString = '{"name": "张三", "age": 30, "isStudent": false, "courses": ["数学", "物理", "化学"]}';

使用 JSON.parse() 将其解析：

const userObject = JSON.parse(jsonString);
console.log(userObject);
// 输出: { name: '张三', age: 30, isStudent: false, courses: [ '数学', '物理', '化学' ] }
// 现在你可以像操作普通 JS 对象一样访问数据
console.log(userObject.name);        // 输出: 张三
console.log(userObject.courses[1]);  // 输出: 物理

JSON.parse() 的第二个参数：解析器函数

JSON.parse() 还可以接受第二个参数，一个“转换器”函数，这个函数会在解析每个键值对时被调用，让你可以自定义转换过程。

示例： 假设我们想将所有字符串类型的值转换为大写。

const jsonString = '{"name": "李四", "city": "beijing"}';
const userObject = JSON.parse(jsonString, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});
console.log(userObject);
// 输出: { name: '李四', city: 'BEIJING' }

常见的解析错误

如果传入 JSON.parse() 的字符串不是有效的 JSON 格式，它会抛出 SyntaxError 错误，这是开发中非常常见的问题。

错误示例：

// 1. 属性名没有使用双引号
const badJson1 = "{name: '王五'}"; // 错误！
// 2. 使用了单引号包裹字符串
const badJson2 = '{"city": '上海'}'; // 错误！
// 3. 末尾有逗号
const badJson3 = '{"name": "赵六", "age": 40,}'; // 错误！
try {
  JSON.parse(badJson1);
} catch (error) {
  console.error("解析失败:", error.message);
  // 输出: 解析失败: Unexpected token n in JSON at position 1
}

最佳实践： 在调用 JSON.parse() 时，始终使用 try...catch 语句来捕获潜在的错误，避免整个应用程序崩溃。

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("无效的 JSON 字符串:", error);
    return null; // 或者返回一个默认对象
  }
}
const data = safeParse(invalidString);
if (data) {
  // 安全地操作 data
}

第二部分：格式化 JSON 数据 —— 将对象转换为易读的文本

我们需要将 JavaScript 对象或数组转换回 JSON 字符串，在调试时打印出结构清晰的数据，或者将数据发送到服务器，这个过程就是“序列化”（Serialization），而我们常说的“格式化”或“美化”是序列化的一种特殊形式。

核心方法：`JSON.stringify()`

JSON.stringify() 是 JavaScript 提供的“反向操作”，它将一个 JS 对象/数组转换为一个 JSON 格式的字符串。

基本语法：

let jsonString = JSON.stringify(jsObject);

示例：

const userObject = {
  name: "钱七",
  age: 25,
  skills: ["JavaScript", "Python", "Node.js"]
};
const jsonString = JSON.stringify(userObject);
console.log(jsonString);
// 输出: {"name":"钱七","age":25,"skills":["JavaScript","Python","Node.js"]}

可以看到,默认输出的 JSON 字符串是压缩在一行的，虽然节省空间，但不利于阅读和调试。

实现“格式化”或“美化”输出

JSON.stringify() 的强大之处在于它的第二个和第三个参数，这两个参数是实现“格式化”的关键。

使用“空格”参数（最常用）

JSON.stringify() 的第三个参数可以用来指定缩进所用的空白字符，如果你传入一个数字，它代表每一级缩进的空格数（最大为10），如果你传入一个字符串（如 '\t' 或），它就会用该字符串作为缩进。

示例：使用数字进行缩进

const userObject = { name: "孙八", details: { id: 101, role: "admin" } };
// 使用 2 个空格进行缩进
const prettyJsonString1 = JSON.stringify(userObject, null, 2);
console.log(prettyJsonString1);

输出结果：

{
  "name": "孙八",
  "details": {
    "id": 101,
    "role": "admin"
  }
}

示例：使用制表符（\t）进行缩进

// 使用制表符进行缩进
const prettyJsonString2 = JSON.stringify(userObject, null, '\t');
console.log(prettyJsonString2);

输出结果：

{
    "name": "孙八",
    "details": {
        "id": 101,
        "role": "admin"
    }
}

使用“替换器”函数和“空格”参数

JSON.stringify() 的第二个参数（替换器函数）可以控制哪些属性应该被包含在最终的 JSON 字符串中，结合第三个参数，可以实现更精细的格式化控制。

示例：只格式化特定属性

const data = {
  id: 123,
  password: "a-very-secret-password", // 我们不想序列化这个字段
  username: "tester",
  createdAt: "2023-10-27T10:00:00Z"
};
// 只包含 'id' 和 'username' 属性，并使用 4 个空格格式化
const filteredAndPrettyJson = JSON.stringify(data, ['id', 'username'], 4);
console.log(filteredAndPrettyJson);

输出结果：

{
    "id": 123,
    "username": "tester"
}

总结与实践

功能	核心方法	描述	示例
解析 (读)	`JSON.parse()`	将 JSON 字符串转换为 JavaScript 对象。	`const obj = JSON.parse('{"key": "value"}');`
序列化 (写)	`JSON.stringify()`	将 JavaScript 对象转换为 JSON 字符串。	`const str = JSON.stringify({key: "value"});`
格式化 (美化)	`JSON.stringify(obj, null, 2)`	在序列化时添加缩进，使输出更易读。	`const prettyStr = JSON.stringify(obj, null, '\t');`

完整实践案例：

假设我们要从一个 API 获取用户列表，然后将其格式化并显示在页面上。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">JSON 格式化示例</title>
  <style>
    body { font-family: sans-serif; }
    pre { background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; }
  </style>
</head>
<body>
  <h1>用户数据</h1>
  <pre id="output"></pre>
  <script>
    // 模拟从服务器返回的 JSON 字符串
    const apiResponse = `[
      {"id":1,"name":"张三","email":"zhangsan@example.com"},
      {"id":2,"name":"李四","email":"lisi@example.com","isActive":true},
      {"id":3,"name":"王

正文

js怎么解析返回的json数据格式化

从入门到精通：JavaScript 解析与格式化 JSON 数据完全指南

第一部分：解析 JSON 数据 —— 将文本转换为 JavaScript 对象

核心方法：`JSON.parse()`

常见的解析错误

第二部分：格式化 JSON 数据 —— 将对象转换为易读的文本

核心方法：`JSON.stringify()`

实现“格式化”或“美化”输出

使用“空格”参数（最常用）

使用“替换器”函数和“空格”参数

总结与实践

相关阅读

谷歌json怎么解析数组

json对象list怎么写

为什么xml不能用json

如何把数据转化成json格式的文件格式

发表评论取消回复

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

目录[+]

从入门到精通：JavaScript 解析与格式化 JSON 数据完全指南

第一部分：解析 JSON 数据 —— 将文本转换为 JavaScript 对象

核心方法：JSON.parse()

常见的解析错误

第二部分：格式化 JSON 数据 —— 将对象转换为易读的文本

核心方法：JSON.stringify()

实现“格式化”或“美化”输出

使用“空格”参数（最常用）

使用“替换器”函数和“空格”参数

总结与实践

相关阅读

谷歌json怎么解析数组

json对象list怎么写

为什么xml不能用json

如何把数据转化成json格式的文件格式

发表评论取消回复

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

目录[+]

核心方法：`JSON.parse()`

核心方法：`JSON.stringify()`