Javascript 简明教程

JavaScript - JSON

What is JSON?

JSON (JavaScript 对象表示法) 是一种基于文本的数据格式，用于表示对象和数据结构。它与语言无关，这意味着可以使用它与任何编程语言配合使用。JSON 通常用于在服务器和 web 应用程序之间，或在两个不同的 web 应用程序之间交换数据。

JSON Features

JSON 是一种与语言无关的数据存储格式。

  1. Language-independent

  2. 可用于表示对象和数据结构。

  3. 可用于在不同编程语言之间交换数据。

  4. 可以在其他对象中嵌套。

  5. 可以包含任何类型的数据。

JSON Syntax

JSON 数据表示为键值对。每个键值对之间用逗号分隔。JSON 数据写在花括号内。

以下是一个简单的 JSON 语法 &minusl;

{
   "key1": value1,
   "key2": value2,
   ...
}

键名 (key1、key2、…) 总是用双引号写。JSON 数据值 (value1、value2、…) 可以包含以下数据类型 −

  1. String − 用双引号引起来的一系列字符。

  2. Number − 整数或浮点数。

  3. Boolean − true 或 false。

  4. Array − 一个有序的值列表。

  5. Object − 一个无序的键值对集合。

  6. null − 表示没有值。

JSON Data

JSON 数据与 JavaScript 对象中的属性书写方式相同，也是写成键值对。每个键值对由用双引号书写的键名组成，后跟一个冒号，后跟一个值。

"name":"John Doe"

JSON 数据和 JavaScript 对象属性之间是有区别的。JSON 数据中的键名总是用双引号写，但对象属性名不需要这样做。

JSON Objects

我们可以通过在花括号内写 JSON 数据来创建 JSON 对象。JSON 对象可以包含多个由逗号分隔的键值对。

{"name": "John Doe", "age": 30, "isStudent": false}

在 JavaScript 中，我们可以将 JSON 对象解析到变量中 −

let person = {"name": "John Doe", "age": 30, "isStudent": false}

在上述示例中，JSNO 对象包含三个 JSON 数据。

JSON Arrays

JSON 数组用方括号编写。我们在方括号内编写 JSON 数据以创建 JSON 数组。数组可以包含对象。

[
   {
      "name": "John Doe",
      "age": 30,
      "occupation": "Software Engineer"
   },
   {
      "name": "Jane Doe",
      "age": 25,
      "occupation": "Doctor"
   }
]

在上述示例中，数组包含两个 JSON 对象。该数组是 JSON 数组。它是一种有效的 JSON 类型。

Accessing JSON Data

我们可以使用点或方括号标记法来访问 JSON 数据。

Example

在下面的示例中，我们创建了一个包含三个键名称（name、age 和 occupation）的 JSON 对象，并将其解析到变量名 person 中。然后，我们使用点标记法访问名称，并使用方括号标记法访问 age。

<html>
<body>
   <div> Accessing JSON data </div>
   <div id="demo"></div>
   <script>
      const person = {
         "name": "John Doe",
         "age": 30,
         "occupation": "Software Engineer"
      }
      document.getElementById("demo").innerHTML =
      "Name: "+person.name + "<br>"+
      "Age: "+person.age+ "<br>"+
      "Occupation: "+person.occupation;
   </script>
</body>
</html>
Accessing JSON data
Name: John Doe
Age: 30
Occupation: Software Engineer

正如我们在输出中看到的那样，它检索了键名“John Doe”和“30”。

JSON Methods

下表显示了 JSON 方法及其说明 −

Sr.No.

Name & Description

1

JSON.parse() 它解析一个 JSON 字符串并创建一个 JavaScript 对象。

2

JSON.stringify() 它将一个 JavaScript 对象转换为 JSON 字符串。

JSON vs. JavaScript Object

JSON 对象与 JavaScript 对象相同。两者都可以相互转换。但它们有一些区别 −

JSON 与语言无关，可以用于不同编程语言之间的数据交换，但 JavaScript 对象只能在 JavaScript 中使用。

JSON 不能包含函数，而 JavaScript 对象可以将函数包含为属性值

JSON 数据的键名总是用双引号编写，而 JavaScript 对象中则不这样。

Converting JSON string to JavaScript Objects

我们可以使用内置函数 JSON.parse() 将 JSON 转换为 JavaScript 对象。为此，我们首先创建一个包含 JSON 对象的 JavaScript 字符串。

let jsonString = '{"name": "John Doe", "age": 30, "isStudent": false}';

然后，我们使用 JSON.parse() 函数将字符串转换为 JavaScript 对象 −

const jsonObject = JSON.parse(jsonString);

Example

在下面的示例中，我们定义了一个包含 JSON 对象的字符串。然后，我们使用 JSON.parse() 函数将 JSON 字符串解析为 JavaScript 对象。最后，我们显示了第一个 JSON 数据值。

<html>
<body>
   <div> Converting JSON string to JavaScript object</div>
   <div id="demo"></div>
   <script>
      let jsonString = '{"name": "John Doe", "age": 30, "isStudent": false}';
      const jsonObject = JSON.parse(jsonString);
      document.getElementById("demo").innerHTML = jsonObject.name;
   </script>
</body>
</html>
Converting JSON string to JavaScript object
John Doe

正如我们在输出中看到的那样，上述程序将 JavaScript 对象转换为 JSON 对象。

Converting JavaScript Object to JSON

我们可以使用 JavaScript 内置函数 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串。

<html>
<body>
   <div> Converting JavaScript object to JSON string </div>
   <div id="demo"></div>
   <script>
      const person = {
         name: "John Doe",
         age: 30,
         isStudent: false
      };
      const jsonString = JSON.stringify(person);
     document.getElementById("demo").innerHTML = jsonString;
   </script>
</body>
</html>
Converting JavaScript object to JSON string
{"name":"John Doe","age":30,"isStudent":false}