JavaScript - JSON

什么是 JSON？

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

JSON 特性

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

语言无关
可用于表示对象和数据结构。
可用于在不同的编程语言之间交换数据。
可以嵌套在其他对象中。
可以包含任何类型的数据。

JSON 语法

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

以下是一个简单的 JSON 语法示例：

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

键名（key1、key2、…）始终用双引号括起来。JSON 数据值（value1、value2、…）可以包含以下数据类型：

字符串 - 用双引号括起来的字符序列。
数字 - 整数或浮点数。
布尔值 - true 或 false。
数组 - 值的有序列表。
对象 - 键值对的无序集合。
null - 表示值不存在。

JSON 数据

JSON 数据的写法与 JavaScript 对象的属性写法相同，都是键值对的形式。每个键值对由用双引号括起来的键名、冒号和值组成。

"name":"John Doe"

JSON 数据和 JavaScript 对象属性之间存在差异。JSON 数据中的键名始终用双引号括起来，而对象属性名则不需要。

JSON 对象

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

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

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

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

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

JSON 数组

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

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

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

访问 JSON 数据

我们可以使用点或括号表示法访问 JSON 数据。

示例

在下面的示例中，我们创建了一个包含三个键名（name、age 和 occupation）的 JSON 对象，并将其解析到名为 person 的变量中。然后，我们使用点表示法访问了 name，使用括号表示法访问了 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 方法

下表显示了 JSON 方法及其描述：

序号	名称和描述
1	JSON.parse() 它解析 JSON 字符串并创建一个 JavaScript 对象。
2	JSON.stringify() 它将 JavaScript 对象转换为 JSON 字符串。

序号

名称和描述

JSON.parse()

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

JSON.stringify()

它将 JavaScript 对象转换为 JSON 字符串。

JSON 与 JavaScript 对象

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

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

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

JSON 数据中的键名始终用双引号括起来，但在 JavaScript 对象中则不是这样。

将 JSON 字符串转换为 JavaScript 对象

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

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

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

const jsonObject = JSON.parse(jsonString);

示例

在下面的示例中，我们定义了一个包含 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 对象。

将 JavaScript 对象转换为 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}

打印页面