菜鸟教程 – 学的不仅是技术，更是梦想！

JavaScript JSON

关键要点

  • JSON 是一种轻量级数据交换格式，易于人读写和机器解析。
  • 它基于 JavaScript 对象语法，但独立于语言，常用于服务器与网页数据传输。
  • JSON 支持对象（键值对）和数组（有序值列表），值可为字符串、数字、布尔值、null 或嵌套结构。
  • 在 JavaScript 中，可用 JSON.parse() 将 JSON 字符串转为对象，用 JSON.stringify() 将对象转为 JSON 字符串。
  • 研究表明，JSON 需使用双引号，单引号无效，且不包含方法，仅为纯数据。

什么是 JSON？

JSON（JavaScript Object Notation）是一种用于存储和传输数据的格式，常用于服务器向网页传递数据。它基于 JavaScript 对象语法，但独立于语言，易于理解和处理。

JSON 的结构

JSON 由两部分组成：

  • 对象：键值对的集合，用花括号 {} 包裹，例如 {"name": "John", "age": 30}。
  • 数组：有序值的列表，用方括号 [] 包裹，例如 ["apple", "banana"]。

值可以是字符串（双引号内）、数字、布尔值（true/false）、null、对象或数组，支持嵌套。

在 JavaScript 中的使用

  • 用 JSON.parse() 将 JSON 字符串转为 JavaScript 对象，例如：
  var text = '{"name": "John", "age": 30}';
  var obj = JSON.parse(text);
  console.log(obj.name); // 输出: John
  • 用 JSON.stringify() 将 JavaScript 对象转为 JSON 字符串，例如：
  var obj = {name: "John", age: 30};
  var json = JSON.stringify(obj);
  console.log(json); // 输出: {"name":"John","age":30}

注意事项

  • JSON 字符串和属性名必须用双引号，单引号无效。
  • JSON 是纯数据格式，不支持方法。
  • 可使用在线工具如 jsonlint.com 验证 JSON 有效性。

详细报告

本文旨在全面讲解 JavaScript 中的 JSON（JavaScript Object Notation），一种轻量级数据交换格式，广泛用于 Web 开发中的数据传输和存储。以下将详细探讨其定义、结构、使用方法、应用场景以及注意事项。

定义与背景

JSON 由美国程序员道格拉斯·克罗克福特（Douglas Crockford）构想和设计，基于 1999 年《JavaScript Programming Language, Standard ECMA-262 3rd Edition》的一个子集。尽管其名称包含“JavaScript”，但 JSON 是独立于语言的文本格式，易于人阅读和编写，同时也易于机器解析和生成。它采用了类似于 C 语言家族（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）的习惯用法，使其成为理想的数据交换语言。

JSON 的核心优势在于其简洁性和跨语言兼容性，几乎所有与网络开发相关的编程语言都有解析 JSON 的库。在 JavaScript 中，内置的 JSON 对象提供了便捷的解析和序列化功能，使其在 Web 开发中尤为流行。

JSON 的结构

JSON 建构于两种基本结构：

  1. 名称/值对的集合（A collection of name/value pairs）：在不同语言中，这被理解为对象（object）、记录（record）、结构（struct）、字典（dictionary）、哈希表（hash table）、有键列表（keyed list）或关联数组（associative array）。例如：
   {
     "name": "John",
     "age": 30,
     "city": "New York"
   }
  1. 值的有序列表（An ordered list of values）：在大部分语言中，这被理解为数组（array）。例如：
   ["apple", "banana", "orange"]

JSON 的值可以是以下类型：

  • 字符串：必须用双引号 "" 包裹，支持 Unicode 字符，使用反斜杠 \ 进行转义，类似于 C/Java 字符串。
  • 数字：类似于 C/Java 数字，支持十进制，可以为负数，有小数部分，可用 e 或 E 表示指数部分，不支持八进制和十六进制。
  • 布尔值：true 或 false。
  • null：表示空值。
  • 对象：用花括号 {} 包裹，包含零个或多个键值对，键值对之间用逗号 , 分隔，键和值之间用冒号 : 分隔。
  • 数组：用方括号 [] 包裹，包含零个或多个值，用逗号 , 分隔。

JSON 支持嵌套，例如：

{
  "person": {
    "name": "John",
    "address": {
      "street": "123 Main St",
      "city": "New York"
    },
    "hobbies": ["reading", "swimming"]
  }
}

JSON 在 JavaScript 中的使用

在 JavaScript 中，JSON 常用于客户端与服务器之间的数据交换。例如，服务器返回的 API 数据通常是 JSON 格式的字符串，客户端需要将其解析为 JavaScript 对象进行处理。

解析 JSON 字符串

使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。例如：

var text = '{"name": "John", "age": 30}';
var obj = JSON.parse(text);
console.log(obj.name); // 输出: John
console.log(obj.age); // 输出: 30

如果 JSON 字符串包含数组，可以通过索引访问，例如：

var text = '{"sites": [{"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}]}';
var obj = JSON.parse(text);
console.log(obj.sites[1].name); // 输出: Google

注意：JSON.parse() 会抛出错误如果输入的字符串不是有效的 JSON 格式。

序列化 JavaScript 对象

使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。例如：

var obj = {name: "John", age: 30};
var json = JSON.stringify(obj);
console.log(json); // 输出: {"name":"John","age":30}

JSON.stringify() 还可以接受第二个参数，用于指定要包含的属性，或第三个参数，用于格式化输出（增加缩进）。例如：

var obj = {name: "John", age: 30, city: "New York"};
console.log(JSON.stringify(obj, ["name", "age"], 2));
// 输出:
// {
//   "name": "John",
//   "age": 30
// }

JSON 的特点与注意事项

以下是 JSON 在使用中的一些重要特点和注意事项：

特性描述
语言独立性尽管基于 JavaScript，但可被任何编程语言解析和生成。
字符串要求字符串和属性名必须用双引号 ""，单引号 '' 无效。
数据类型支持字符串、数字、布尔值、null、对象和数组，不支持函数或方法。
嵌套支持支持复杂嵌套结构，对象和数组可以相互嵌套。
验证工具可使用在线工具如 jsonlint.com 验证 JSON 有效性。
  • 纯数据格式：JSON 是纯数据，不包含方法或函数。例如，以下是无效的 JSON：
  {"name": "John", "sayHello": function() { return "Hello"; }}

在 JavaScript 对象中可以包含函数，但在 JSON 中不行。

  • 字符编码：JSON 必须使用 UTF-8 编码，支持多语言字符。
  • 访问数据：解析后的 JSON 对象可以像 JavaScript 对象一样使用点运算符（.）或方括号（[]）访问数据。例如：
  var obj = JSON.parse('{"person": {"name": "John", "age": 30}}');
  console.log(obj.person.name); // 输出: John
  console.log(obj["person"]["age"]); // 输出: 30

JSON 的应用场景

JSON 广泛用于 Web 开发中的以下场景：

  • API 数据传输：服务器通过 RESTful API 返回 JSON 数据，客户端（如浏览器）解析后显示。
  • 配置文件：许多应用程序使用 JSON 作为配置文件格式，例如 package.json 在 Node.js 项目中。
  • 数据存储：在 NoSQL 数据库（如 MongoDB）中，数据通常以 JSON 格式存储。
  • 跨语言通信：由于 JSON 的语言独立性，它常用于不同编程语言之间的数据交换。

例如，使用 Fetch API 获取 JSON 数据：

fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json')
  .then(response => response.json())
  .then(data => console.log(data));

这会从指定 URL 获取 JSON 数据，并将其解析为 JavaScript 对象。

浏览器支持与历史

JSON 在现代浏览器中都有广泛支持，其格式自 1999 年 ECMA-262 3rd Edition 以来成为标准。以下是部分浏览器的最低支持版本（数据来源于 MDN Web Docs）：

浏览器最低支持版本
Chrome3 (2008 年)
Firefox3.5 (2009 年)
Safari4 (2009 年)
Edge12 (2015 年)
Opera10.5 (2009 年)

在 2025 年 6 月，所有现代浏览器均完全支持 JSON，无需额外的 polyfill。

实践中的使用建议

  • 使用 JSON.parse() 处理从服务器接收的 JSON 字符串，确保数据格式正确。
  • 使用 JSON.stringify() 将 JavaScript 对象序列化为 JSON 字符串时，注意格式化选项（如缩进）以提高可读性。
  • 验证 JSON 格式，避免解析错误，特别是在处理用户输入或外部数据时。
  • 对于复杂对象，建议使用在线工具如 jsonlint.com 验证。

示例代码

以下是一些示例代码，展示 JSON 在 JavaScript 中的使用：

  • 解析 JSON 字符串：
  var jsonString = '{"name": "John", "age": 30, "hobbies": ["reading", "gaming"]}';
  var obj = JSON.parse(jsonString);
  console.log(obj.name); // John
  console.log(obj.hobbies[1]); // gaming
  • 序列化 JavaScript 对象：
  var person = {
    name: "John",
    age: 30,
    address: {
      street: "123 Main St",
      city: "New York"
    }
  };
  var jsonString = JSON.stringify(person, null, 2); // 带缩进
  console.log(jsonString);

争议与讨论

目前，JSON 在 JavaScript 社区中几乎没有争议，它被广泛认为是数据交换的理想格式。然而，在某些场景下，关于 JSON 是否适合所有数据传输需求存在讨论。例如，对于非常大的数据集，JSON 的解析性能可能不如其他格式（如 Protocol Buffers）。此外，JSON 的严格语法要求（如必须使用双引号）有时被认为限制了灵活性，但这也正是其跨语言兼容性的基础。

总结

JSON 是 JavaScript 中一种强大的数据交换格式，支持对象和数组的嵌套结构，通过 JSON.parse() 和 JSON.stringify() 可以轻松在字符串和对象之间转换。它在 Web 开发中应用广泛，尤其适合 API 数据传输和配置文件。注意其语法要求（如双引号）和纯数据特性，确保在实际使用中正确处理。

关键引文

likuolei

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注