Javascript 简明教程

JavaScript - JSON

What is JSON?

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

JSON (JavaScript Object Notation) is a text-based data format used to represent objects and data structures. It is language-independent, meaning that it can be used with any programming language. JSON is often used to exchange data between a server and a web application, or between two different web applications.

JSON Features

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

JSON is a language independent data storage format.

Language-independent
Can be used to represent objects and data structures.
Can be used to exchange data between different programming languages.
Can be nested within other objects.
Can contain any type of data.

JSON Syntax

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

JSON data is represented as key – value pairs. Each key value pair is separated by a comma. JSON data is written inside curly braces.

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

Following is a simple syntax of JSON &minusl;

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

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

The key names (key1, key2, …) is always written in double quotes. The JSON data values (value1, value2, …) can contain the following data types −

String − A sequence of characters enclosed in double quotes.
Number − An integer or a floating-point number.
Boolean − Either true or false.
Array − An ordered list of values.
Object − An unordered collection of key-value pairs.
null − Represents the absence of a value.

JSON Data

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

JSON data is written as key – value pairs same as a property is written in JavaScript object. Each key – value pair consist of key name written in double quotes, followed by a colon, followed by a value.

"name":"John Doe"

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

There is a difference between JSON data and JavaScript object property. The key name in JSON data is always written in double quotes but object property name does not require this.

JSON Objects

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

We can create JSON object by writing the JSON data inside the curly braces. The JSON object can contain multiple key – value pairs separated by comma.

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

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

In JavaScript, we can parse the JSON object into a variable −

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

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

In the above example, the JSNO object contains three JSON data.

JSON Arrays

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

JSON arrays are written in brackets. We write JSON data inside the brackets to create a JSON array. An array can contain objects.

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

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

In the above example, an array contains two JSON objects. The array is JSON array. It’s a valid type of JSON.

Accessing JSON Data

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

We can access JSON data using the dot or bracket notation.

Example

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

In the example below, we created a JSON object with three key names – name, age, and occupation, and parse it into a variable name person. Then we accessed the name using dot notation and age using the bracket notation.

<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”。

As we can see in the output, it retrieved the key names "John Doe" and "30".

JSON Methods

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

The following table shows the JSON method and their description −

Sr.No.

Name & Description

JSON.parse() It parses a JSON string and creates a JavaScript object.

JSON.stringify() It converts a JavaScript object to JSON string.

JSON vs. JavaScript Object

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

The JSON objects are same as the JavaScript object. Both can be converted to each other. But they have some differences −

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

JSON is language independent – can be used to exchange data between different programming languages but JavaScript object can be used in JavaScript only.

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

JSON can’t contain functions whereas JavaScript object can contain function as property values

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

The key names in JSON data is always written in double quotes but not in JavaScript objects.

Converting JSON string to JavaScript Objects

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

We can convert JSON to a JavaScript object using built-in function JSON.parse(). To do so first we create a JavaScript string containing the JSON object.

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

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

Then, we use JSON.parse() function to convert string into a JavaScript object −

const jsonObject = JSON.parse(jsonString);

Example

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

In the example below, we define a string containing a JSON object. Then we use JSON.parse() function to parse the JSON string to a JavaScript object. Finally we displayed first JSON data value.

<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 对象。

As we can see in the output, the above program converted the JavaScript object to a JSON object.

Converting JavaScript Object to JSON

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

We can use the JavaScript built-in function JSON.stringify() to convert a JavaScript object to a JSON string.

<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}