JSON 数据格式详解 | 核心语法 + JS 原生操作 + 与 XML 对比

🕒 2026-01-27 15:15:12
📁 JSON学习教程
作者:JSONLA小编

JSON 格式采用key:value的方式记录数据,语法简洁直观,解析效率远高于 XML,是目前前后端数据交互、配置文件编写、跨平台数据传输的主流格式,因而在前端开发、后端接口、移动端开发中被广泛使用。 介绍 json 格式前,先让我们看看 XML 格式。显然,XML 得到了相当多的关注(正面和负面的评价都有),已经在 Ajax 应用程序中广泛使用:

<request>

  <firstName>Brett</firstName>

  <lastName>McLaughlin</lastName>

  <email>brett@newInstance.com</email>

</request>

这里的数据与后面看到的相同,但是这一次采用 XML 格式。这没什么了不起的;这只是另一种数据格式,使我们能够使用 XML 而不是纯文本和名称 / 值对。 本文详细讨论另一种轻量级数据交换格式 ——JavaScript Object Notation(JSON),它基于 JavaScript 对象字面量语法,却独立于编程语言,几乎所有开发语言都支持 JSON 的解析和生成。JSON 看起来既熟悉又陌生,它为数据传输和存储提供了更优的选择,选择范围更大总是好事情。 

一、为什么选择 JSON?

在使用名称 / 值对或 XML 时,实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下,JavaScript 在很大程度上作为一种数据操纵语言,用来移动和操纵来自 Web 表单的数据,并将数据转换为一种适合发送给服务器端程序的格式。 但是,有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下,实际上使用 JavaScript 语言中的对象来表示数据,而不仅是将来自 Web 表单的数据放进请求中。在这些情况下,从 JavaScript 对象中提取数据,然后再将数据放进名称 / 值对或 XML,就有点儿多此一举了。这时就适合使用 JSON:JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的字符串数据(同步或异步都可以),服务端也能轻松将 JSON 字符串还原为对应语言的对象 / 字典。 JSON 并不是某种银弹;但是,它对于前后端数据交互、轻量级数据存储、跨平台数据传输等非常特殊的情况是绝佳的选择。 简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为结构化字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 能原生解析它,而且 JSON 可以表示比名称 / 值对更复杂的结构。例如,可以表示数组和嵌套的复杂对象,而不仅仅是键和值的简单列表。

二、JSON 基础语法

JSON 的语法是 JavaScript 对象字面量的

子集

,并非完全等同,它有严格的语法规范,遵循规范的 JSON 字符串才能被所有语言正确解析,核心规则为:

  1. 键名必须用双引号包裹(单引号或无引号均不合法);
  2. 值的类型仅支持:字符串(双引号)、数字、布尔值(true/false)、null、数组、JSON 对象(嵌套);
  3. 末尾不能有多余的逗号(如{ "name": "Brett", }不合法);
  4. 不支持注释、函数、undefined 等 JavaScript 特性。

简单 JSON 示例

按照最简单的形式,可以用下面这样的 JSON 表示名称 / 值对:

{ "firstName": "Brett" }

这个示例非常基本,而且实际上比等效的纯文本名称 / 值对占用更多的空间: 

firstName="Brett"

但是,当将多个名称/值对串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个名称/值对的记录,比如:

{

"firstName": "Brett",

"lastName":"McLaughlin",

"email": "brett@newInstance.com"

}

从语法方面来看,这与名称 / 值对相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号使这些值有了明确的关联关系,且符合几乎所有编程语言的 “键值对” 数据思维。

值的数组

当需要表示一组值时,JSON 不但能够提高可读性,而且可以大幅减少复杂性。例如,假设您希望表示一个人名列表。在 XML 中,需要大量的开始标记和结束标记,代码冗余且解析耗时;如果使用典型的名称 / 值对,那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式,维护成本极高。 如果使用 JSON,就只需将多个带花括号的记录分组在方括号 [] 中,形成 JSON 数组:    

{ "people": [

  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

]}

这不难理解。在这个示例中,只有一个名为 people 的键,值是包含三个条目的 JSON 数组,每个条目是一个独立的 JSON 对象(人的记录),其中包含名、姓和电子邮件地址。上面的示例演示如何用方括号将多条记录组合成一个数组值。当然,可以使用相同的语法表示多个数组值(每个值进而包含多条记录):

{ "programmers": [

  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

 ],

"authors": [

  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

 ],

"musicians": [

  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

 ]

}

这里最值得注意的是,JSON 能够表示多个同级数组值,每个数组值进而包含多个不同结构的 JSON 对象。但是还应该注意,在不同的主条目(programmers、authors 和 musicians)之间,记录中实际的名称 / 值对可以不一样。JSON 是完全动态的,允许在 JSON 结构的中间改变表示数据的方式,无需遵循预定义的模板或约束。 在处理 JSON 格式的数据时,没有需要遵守的预定义的约束。所以,在同样的数据结构中,可以改变表示数据的方式,甚至可以以不同方式表示同一事物,这让 JSON 在应对多变的业务数据时极具灵活性。

三、在 JavaScript 中使用 JSON

掌握了 JSON 格式之后,在 JavaScript 中使用它就非常简单了。

JSON 是 JavaScript 原生格式

,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或第三方工具包,直接通过原生语法即可完成解析、访问、修改和转换。

将 JSON 数据赋值给变量

可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据直接赋值给它(此时它本质是 JavaScript 对象,并非严格的 JSON 字符串,可直接操作):

var people =

  { "programmers": [

    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

   ],

  "authors": [

    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

   ],

  "musicians": [

    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

   ]

  }

这非常简单;现在 people 包含前面看到的 JSON 格式的 JavaScript 对象数据。接下来只需通过原生语法,即可轻松访问其中的任意数据。

访问 JSON 数据

尽管看起来是一段长代码,但实际上它是一个嵌套的 JavaScript 对象 / 数组组合,将这个数据赋值给 JavaScript 变量之后,就可以通过点号表示法方括号表示法轻松访问。例如,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:  

people.programmers[0].lastName;

注意,数组索引是从零开始的。所以,这行代码首先访问 people 变量中的顶层对象;然后通过点号访问名为 programmers 的数组属性;再通过数组索引[0]获取第一个数组元素(JSON 对象);最后,通过点号访问 lastName 键的值,结果是字符串值 “McLaughlin”。  

下面是使用同一变量的几个访问示例,可直观感受 JSON 数据的访问逻辑:  

people.authors[1].genre                       // Value is "fantasy"

people.musicians[3].lastName          // Undefined. This refers to the fourth entry, and there isn't one

people.programmers.[2].firstName      // Value is "Elliotte"

利用这样的原生语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API,这也是 JSON 在 JavaScript 中使用的最大优势。

修改 JSON 数据

正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改 JavaScript 中的 JSON 对象数据,直接通过赋值操作即可覆盖原有值: 

people.musicians[1].lastName = "Rachmaninov";

在将 JSON 格式的字符串转换为 JavaScript 对象之后,就可以像这样自由修改变量中的数据,修改后的结果仅存在于当前 JavaScript 运行环境中,可直接用于后续业务逻辑。

转换回字符串

当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript中这种转换也很简单:

String newJSONtext = people.toJSONString();

这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是,可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换,只需执行相同形式的命令:

String myObjectInJSON = myObject.toJSONString();

这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API(提供了将自己的数据结构转换为文本的函数),也需要学习这个API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

相关推荐

正在加载... ...