异常教程

javascript json（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，JavaScript 和 JSON（JavaScript Object Notation）的结合是数据交互的核心技术之一。无论是前端与后端的通信、本地数据存储，还是 API 接口的调用，JSON 几乎无处不在。对于编程初学者和中级开发者而言，掌握 JavaScript 处理 JSON 的能力，不仅能提升代码效率，还能为构建复杂应用打下坚实基础。本文将从基础概念到实战技巧，系统讲解 JavaScript 与 JSON 的协作方式，并通过代码示例帮助读者快速上手。

一、JSON 的基本概念与特点

1.1 什么是 JSON？

JSON 是一种轻量级的数据交换格式，其语法基于 JavaScript 对象的语法，但具有语言无关性。它通过键值对（Key-Value）的结构组织数据，支持的数据类型包括字符串、数值、布尔值、数组、对象和 null。

形象比喻：
可以将 JSON 比作一个“快递包裹”，其外包装是固定的格式（如“{}”包裹对象，“[]”包裹数组），而内部装载的数据内容（键值对）可以根据需求自由组合。

1.2 JSON 与 JavaScript 对象的关系

JSON 的语法与 JavaScript 对象（Object）的语法高度相似，但两者存在关键区别：

  • JavaScript 对象：是动态的、可修改的内存数据结构。
  • JSON：是静态的文本格式，需通过解析才能转化为 JavaScript 对象。

示例对比：

// JavaScript 对象（动态）
const user = {
  name: "Alice",
  age: 25,
  isStudent: true
};

// JSON 格式（静态文本）
const jsonStr = '{"name": "Alice", "age": 25, "isStudent": true}';

1.3 JSON 的核心特点

  • 简洁易读：键名和字符串值需用双引号包裹，避免了单引号的混乱。
  • 跨语言兼容：几乎所有编程语言（如 Python、Java、PHP）都支持 JSON 解析。
  • 高效传输：相比 XML，JSON 的体积更小，解析速度更快。

二、JavaScript 处理 JSON 的核心方法

2.1 将 JSON 字符串转换为 JavaScript 对象：JSON.parse()

当从服务器或 API 接收 JSON 数据时，需使用 JSON.parse() 将其解析为可操作的 JavaScript 对象。

代码示例：

const jsonString = '{"id": 1, "title": "JavaScript 教程", "price": 19.99}';
const product = JSON.parse(jsonString);
console.log(product.title); // 输出："JavaScript 教程"

注意事项：

  • 如果输入的字符串不是合法的 JSON 格式，JSON.parse() 会抛出错误。
  • 可通过 try...catch 语句捕获异常，避免程序崩溃： 
    try {
  const obj = JSON.parse(invalidJson);
} catch (error) {
  console.error("JSON 格式错误:", error);
}

2.2 将 JavaScript 对象转换为 JSON 字符串：JSON.stringify()

当需要将数据发送到服务器或存储时，JSON.stringify() 可将对象序列化为字符串。

代码示例：

const userData = {
  name: "Bob",
  hobbies: ["coding", "reading"],
  address: {
    city: "Beijing"
  }
};
const jsonOutput = JSON.stringify(userData);
console.log(jsonOutput);
// 输出：{"name":"Bob","hobbies":["coding","reading"],"address":{"city":"Beijing"}}

进阶技巧：

  • 忽略循环引用：若对象中存在循环引用（如 obj.self = obj），JSON.stringify() 会自动忽略并输出 null。
  • 自定义序列化逻辑：通过传递 replacer 函数过滤或转换数据： 
    const filteredJson = JSON.stringify(userData, (key, value) => {
  if (key === "address") return undefined; // 排除 address 字段
  return value;
});
// 输出：{"name":"Bob","hobbies":["coding","reading"]}

三、JSON 的常见操作场景与代码实践

3.1 解析嵌套 JSON 数据

实际应用中，JSON 数据通常具有多层嵌套结构。开发者需通过链式访问或遍历方法提取数据。

案例场景：解析天气 API 返回的 JSON 数据

const weatherData = `{
  "location": "Shanghai",
  "forecast": {
    "today": {
      "temp": "25°C",
      "condition": "sunny"
    },
    "tomorrow": {
      "temp": "28°C",
      "condition": "cloudy"
    }
  }
}`;

const weather = JSON.parse(weatherData);
console.log(weather.forecast.tomorrow.condition); // 输出："cloudy"

3.2 动态修改 JSON 数据

通过将 JSON 字符串解析为对象后，可像操作普通对象一样修改其属性，再通过 JSON.stringify() 重新生成字符串。

代码示例：

let configJson = '{"theme": "light", "notifications": true}';
let config = JSON.parse(configJson);
config.notifications = false; // 修改值
configJson = JSON.stringify(config); // 重新序列化
console.log(configJson); // 输出：{"theme":"light","notifications":false}

3.3 处理特殊数据类型

JavaScript 中的 undefined、函数和 Symbol 类型在序列化时会被忽略或转换为 null，需特别注意。

问题示例：

const invalidObj = {
  name: "Charlie",
  greeting: function() { return "Hello!"; }, // 函数会被忽略
  undefinedValue: undefined // 转换为 null
};
const result = JSON.stringify(invalidObj);
// 输出：{"name":"Charlie","undefinedValue":null}

四、JSON 在 Web 开发中的实战应用

4.1 与 AJAX 的结合

通过 XMLHttpRequest 或 fetch API 获取 JSON 数据是前端开发的常见操作。

案例：使用 fetch API 获取天气信息

fetch("https://api.weather.example.com/data")
  .then(response => response.json()) // 自动解析为 JSON 对象
  .then(data => {
    console.log("当前温度:", data.current.temp);
  })
  .catch(error => console.error("请求失败:", error));

4.2 局部存储与持久化

利用浏览器的 localStorage 或 sessionStorage 存储 JSON 数据，实现跨页面的数据共享。

代码示例：

// 保存用户配置
const userSettings = { language: "zh-CN", fontSize: 14 };
localStorage.setItem("settings", JSON.stringify(userSettings));

// 读取配置
const storedSettings = JSON.parse(localStorage.getItem("settings"));
console.log(storedSettings.language); // 输出："zh-CN"

4.3 复杂数据结构的处理

对于包含数组和嵌套对象的 JSON 数据，可使用 for...in 循环或 Object.keys() 遍历属性。

代码示例：遍历购物车数据

const cartJson = `{
  "items": [
    {"id": 1, "name": "Laptop", "price": 999},
    {"id": 2, "name": "Mouse", "price": 29}
  ]
}`;

const cart = JSON.parse(cartJson);
let total = 0;
cart.items.forEach(item => {
  total += item.price;
});
console.log("总价:", total); // 输出：1028

五、进阶技巧与常见问题解决

5.1 JSON Schema 验证

通过 JSON Schema 可定义 JSON 数据的结构，确保数据符合预期格式。

示例 Schema 定义：

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "number" }
  },
  "required": ["name"]
}

使用库验证：

const Ajv = require("ajv");
const ajv = new Ajv();
const validate = ajv.compile(schema);
const isValid = validate(userData);
if (!isValid) console.error(validate.errors); // 输出验证错误

5.2 安全性考虑：防范 JSON Hijacking

避免直接将用户输入的 JSON 数据通过 eval() 或 new Function() 执行，以防恶意代码注入。

错误做法：

// 危险操作！可能导致代码执行
const unsafeData = eval("(" + userInput + ")");

5.3 处理日期对象的序列化问题

JavaScript 的 Date 对象在序列化时会转换为 ISO 格式字符串，需手动处理以保持原始值。

解决方案：

const now = new Date();
const dateJson = JSON.stringify({ timestamp: now.toISOString() });
// 输出：{"timestamp": "2023-10-05T08:00:00.000Z"}

六、总结与展望

通过本文的学习，读者应已掌握 JavaScript 处理 JSON 的核心方法、常见操作场景及进阶技巧。JSON 的简洁性与跨平台特性使其成为 Web 开发的基石，而深入理解其与 JavaScript 的交互逻辑，能显著提升开发效率和代码质量。

未来，随着 Web 技术的演进，JSON 的应用将更加广泛。开发者可关注以下方向：

  1. JSON 5 标准：支持更多语法扩展（如单引号、注释）。
  2. JSON 与 TypeScript 的结合：通过类型定义增强数据校验。
  3. 高性能 JSON 库：如 fast-json-parse，优化大型数据的解析速度。

希望本文能帮助读者在 JavaScript 与 JSON 的学习之路上走得更远！

最新发布

查看更多文章