JavaScript - JSON



什么是 JSON?

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

JSON 功能

JSON 是一种独立于语言的数据存储格式。

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

JSON 语法

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

以下是 JSON 的简单语法;


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

键名称 (key1, key2, ...) 始终用双引号括起来。JSON 数据值 (value1, value2, ...) 可以包含以下数据类型 -

  • String − 用双引号括起来的字符序列。
  • Number − 整数或浮点数。
  • Boolean − true 或 false。
  • Array - 值的有序列表。
  • Object - 键值对的无序集合。
  • 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。然后我们使用点表示法访问名称,并使用括号表示法访问年龄。


<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 方法及其描述 -

名称 描述
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>将JavaScript对象转换为JSON字符串 - qikepu</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}