JSON 与 JavaScript 对象

学习目标

理解 JSON（JavaScript Object Notation）的定义、语法限制及其在数据交换中的核心作用。
掌握 JavaScript 对象的特性，包括其灵活的数据类型支持和方法定义能力。
清晰辨析 JSON 与 JavaScript 对象在语法、数据类型、功能及用途上的关键差异。
熟练使用 JSON.parse() 和 JSON.stringify() 进行两者之间的相互转换。
了解两者在现代 Web 开发及 API 交互中的具体应用场景。

什么是 JSON

JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种基于文本的轻量级数据格式，专为数据交换而设计。它独立于编程语言，遵循严格的语法规则来存储和传输数据。尽管名字中包含 "JavaScript"，但它被广泛用于各种语言环境（如 Python、Java、C# 等）的数据序列化。一个典型的 JSON 数据示例如下：

{
  "name": "Amit",
  "age": 25,
  "city": "Mumbai"
}

JSON 的核心特征

严格的引号要求：所有的键（Key）和字符串值（String Value）必须使用双引号 " 包裹。单引号是不合法的。
有限数据类型：仅支持字符串、数字、布尔值、数组、对象和 null。不支持函数、undefined、日期对象或正则表达式等复杂类型。
纯数据载体：JSON 仅用于表示数据结构，不包含任何可执行的逻辑或方法。
主要用途：用于服务器与客户端应用程序之间、或不同系统之间的数据传输。

什么是 JavaScript 对象

JavaScript 对象是 JavaScript 语言内部的一种数据结构，用于存储键值对（Key-Value Pairs）。与 JSON 不同，JavaScript 对象是内存中的实体，专为程序内的逻辑处理和操作而设计。

一个典型的 JavaScript 对象示例如下：

const user = {
  name: "Amit",
  age: 25,
  city: "Mumbai",
  greet: function () {
    console.log(`Hello, ${this.name}!`);
  },
};

JavaScript 对象的核心特征

灵活的键名语法：对象的键通常不需要引号（除非键名包含特殊字符或空格），字符串值可以使用单引号或双引号。
丰富的数据类型：支持所有 JavaScript 数据类型，包括 undefined、函数（方法）、日期、正则表达式等。
支持方法与逻辑：对象属性可以是函数，从而允许对象封装行为（方法），实现面向对象编程的特性。
主要用途：直接在 JavaScript 程序中进行数据操作、状态管理和逻辑执行。

JSON 与 JS 对象的区别

为了更直观地理解两者的差异，我们从多个维度进行对比：

对比维度	JSON	JavaScript 对象
定义	用于数据交换的基于文本的格式	JavaScript 中的内存数据结构
语法严格	严格：键和字符串必须使用双引号	灵活：键通常无引号，字符串可用单 / 双引号
数据类型	有限：仅字符串、数字、布尔值、null、数组、对象	全面：支持所有 JS 类型，包括 undefined、函数等
功能性	无方法，不可包含可执行代码	可包含方法（函数），支持逻辑执行
主要用途	系统间的数据传输	程序内的数据操作与逻辑处理
转换需求	需解析（Parse）才能转换为 JS 对象	可直接在 JS 程序中使用，需序列化（Stringify）才能转为 JSON

语法差异的本质：JSON 本质上是一个字符串格式，因此必须严格遵守 RFC 8259 标准（如双引号）。而 JavaScript 对象是语言原生的语法结构，遵循 ECMAScript 规范，更加灵活。
执行能力：JSON 是“死”的数据，无法执行；JavaScript 对象是“活”的实体，可以调用其内部的方法。试图在 JSON 中定义函数会导致语法错误。
内存占用：JSON 作为文本传输时体积较小，但在浏览器中使用时必须被解析为 JavaScript 对象才能被操作，这会消耗额外的内存和 CPU 资源。

转换机制

在实际开发中，我们经常需要在“传输格式（JSON）”和“内存对象（JS Object）”之间进行转换。JavaScript 提供了两个内置的全局方法来完成这一任务。

JSON 转换 JS 对象

使用 JSON.parse() 方法可以将符合 JSON 格式的字符串解析为 JavaScript 对象。这是接收 API 响应数据后的标准操作。

代码示例：

// 模拟从服务器接收到的 JSON 字符串
const jsonString = '{"name": "Neha", "age": 30}';

// 解析为 JavaScript 对象
const userObject = JSON.parse(jsonString);

// 现在可以像操作普通对象一样访问属性
console.log(userObject.name); 
// 输出: Neha

注意：如果传入 JSON.parse() 的字符串格式不正确（例如使用了单引号或包含未转义的字符），程序将抛出 SyntaxError 异常。

JS 对象转换 JSON

使用 JSON.stringify() 方法可以将 JavaScript 对象序列化为 JSON 格式的字符串。这通常用于将数据发送给服务器或存储到本地存储（LocalStorage）中。

代码示例：

// 定义一个 JavaScript 对象
const userData = { name: "Rahul", age: 28 };

// 序列化为 JSON 字符串
const jsonString = JSON.stringify(userData);

console.log(jsonString);
// 输出: {"name":"Rahul","age":28}

重要提示：在序列化过程中，JavaScript 对象中的 undefined、函数（Methods）和 Symbol 类型会被自动忽略或转换为 null。这意味着包含方法的对象在转为 JSON 后，其方法会丢失。

应用场景

理解两者的区别有助于我们在正确的场景选择正确的数据形式。

场景一

API 数据交互（JSON 的主场）

在网络请求中，JSON 是事实上的标准格式。无论是 RESTful API 还是 GraphQL，数据通常都以 JSON 字符串的形式在网络上传输。

典型流程：

客户端发送请求。
服务器返回 JSON 格式的字符串响应。
客户端使用 response.json()（底层调用 JSON.parse()）将其转换为 JavaScript 对象以便渲染页面。

代码示例：

fetch("https://api.example.com/data")
  .then((response) => response.json()) // 自动解析 JSON 字符串为 JS 对象
  .then((data) => {
    // 此时 data 已经是 JavaScript 对象，可以直接操作
    console.log(data);
  });

场景二

内存数据处理（JavaScript 对象的主场）

一旦数据被加载到内存中，所有的业务逻辑、状态更新、事件处理都应当使用 JavaScript 对象。

典型流程：

获取到 JS 对象后，动态添加新属性。
调用对象内部的方法进行计算。
根据用户操作修改对象状态。

代码示例：

// 初始化一个用户数据对象
const userInfo = { name: "Ravi", age: 40 };

// 动态添加属性（这在 JSON 字符串中是无法直接做到的）
userInfo.city = "Delhi";

// 执行逻辑
console.log(userInfo);
// 输出: { name: 'Ravi', age: 40, city: 'Delhi' }

总结

本质区别：JSON 是用于传输的文本格式（字符串），而 JavaScript 对象是用于操作的内存数据结构。
语法约束：JSON 语法极其严格（必须双引号，无注释，无函数）；JavaScript 对象语法灵活，支持方法和复杂类型。
转换桥梁：JSON.parse() 负责将文本“激活”为对象，JSON.stringify() 负责将对象“固化”为文本以便传输。
开发原则：在网络传输层使用 JSON，在应用逻辑层使用 JavaScript 对象。不要试图在 JSON 中编写逻辑，也不要在网络传输中直接发送 JavaScript 对象（必须先序列化）。

源本科技 | 码上会

学习目标

什么是 JSON

什么是 JavaScript 对象

JSON 与 JS 对象的区别

转换机制

JSON 转换 JS 对象

JS 对象转换 JSON

应用场景

场景一

场景二

总结