JavaScript JSON

JSON 是一种轻量的数据交换语言，容易阅读和自动生成。本文介绍 JSON 的格式及简单用法。

JSON 是一种轻量的数据交换语言，容易阅读和自动生成。本文介绍 JSON 的格式及简单用法。

当数据从服务器发送到网页时，很多时候会使用 JSON 作为数据格式。

什么是 JSON？

  • JSON 代表 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式
  • JSON 与语言无关
  • JSON 易于理解和书写

JSON 语法源自 JavaScript 对象字面量语法，但 JSON 格式仅为文本。读取和生成 JSON 数据的代码可以用任何编程语言编写。

JSON 示例

这个 JSON 数据定义了一个对象，对象有 employees 属性， employees 是一个包含了 3 个员工信息的数组。

{
  "employees": [
    { "firstName": "John", "lastName": "Doe" },
    { "firstName": "Anna", "lastName": "Smith" },
    { "firstName": "Peter", "lastName": "Jones" }
  ]
}

JSON vs JavaScript 对象

JSON 格式在语法上与用于创建 JavaScript 对象的代码相似。

由于这种相似性，JavaScript 程序可以轻松地将 JSON 数据转换为原生 JavaScript 对象。

JSON 语法规则

  • 数据使用键值对表示
  • 数据之间使用逗号分隔
  • 花括号表示对象
  • 方括号表示数组

JSON 数据 - 键值对

JSON 数据以键值对的形式编写，就像 JavaScript 对象属性一样。

JSON 的键名称需要使用双引号，JavaScript 名称没有。

名称/值对由字段名称（双引号）、冒号和值组成：

 "firstName":"John"

JSON 对象

JSON 对象写在花括号内。

就像在 JavaScript 中一样，对象可以包含多个键值对：

{ "firstName": "John", "lastName": "Doe" }

JSON 数组

JSON 数组写在方括号内。

就像在 JavaScript 中一样，数组可以包含对象：

"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]

在上面的例子中， employees 是一个数组。它包含三个对象。

每个对象都是一个人的记录（有名字和姓氏）。

将 JSON 转为 JavaScript 对象

JavaScript 内置了 JSON.parse() 方法将 JSON 格式的文本转为 JavaScript 对象。

JSON 的一个常见用途是从 Web 服务器读取数据，并将数据显示在网页中。

为简单起见，下面的例子使用字符串作为输入来演示。

  1. 首先，创建一个内容为 JSON 数据格式的字符串：

    let text =
  '{ "employees" : [' +
  '{ "firstName":"John" , "lastName":"Doe" },' +
  '{ "firstName":"Anna" , "lastName":"Smith" },' +
  '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

  2. 然后，使用 JSON.parse() 将字符串转换为 JavaScript 对象：

    const obj = JSON.parse(text);

  3. 最后，直接使用 JavaScript 对象：

    <p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
JavaScript 类 JavaScript 回调