JavaScript - JSON：初学者的指南

你好啊，未来的编程巫师们！今天，我们将踏上一段激动人心的旅程，探索JSON的世界。如果你之前从未听说过它，别担心——在这个教程结束时，你将能够自信地像专业人士一样处理JSON。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起开始吧！

JavaScript - JSON

什么是JSON？

JSON，代表JavaScript对象表示法，是一种轻量级的数据交换格式。我知道这听起来可能有点难以理解，但你可以把它想象成一种计算机之间相互交流并共享信息的方式，这种方式既易于机器理解，也易于人类理解。

想象一下你在课堂上传纸条（当然，我并不是提倡这样做！）。JSON就像是写这些纸条的一种标准化方式，让任何阅读它们的人都能快速、轻松地理解信息。

JSON的特点

在我们深入细节之前，让我们先来看看是什么让JSON如此特别：

它轻量级且易于阅读。
它与语言无关（不仅仅是JavaScript）。
它基于两种通用结构：对象和数组。

这些特点使得JSON成为数据存储和传输的优秀选择，这也是它在Web应用中如此广泛应用的原因。

JSON语法

现在，让我们来看看JSON的基本语法。别担心一开始看起来可能会有些奇怪——我们会一步一步分解它。

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

这是一个简单的JSON对象。让我们分解一下：

整个对象被大括号{}包围。
在里面，我们有键值对。
键总是字符串，被双引号包围。
值可以是字符串、数字、布尔值、数组、对象或null。
键值对由逗号分隔。

JSON数据

JSON可以表示各种类型的数据。让我们看一些例子：

字符串

{"message": "Hello, World!"}

数字

{"age": 30}

布尔值

{"isStudent": true}

Null

{"spouse": null}

记住，JSON一切都是关于以易于理解和使用的方式表示数据。把它想象成为每条信息创建一个详细的档案。

JSON对象

我们已经看到了一个简单的JSON对象，但让我们更深入一些。JSON对象可以包含多个键值对，甚至可以嵌套对象。

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

在这个例子中，我们有一个主对象，键为"person"。"person"的值是另一个包含各种信息的对象。注意我们是如何嵌套对象，甚至包括数组的（我们稍后会更多地讨论数组）。

JSON数组

JSON中的数组是有序的值列表。它们被方括号[]包围，可以包含任何类型的JSON数据。

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

数组在表示一系列相关项目时非常有用。例如，一个食谱中的配料列表，或者一个游戏中的高分列表。

访问JSON数据

现在我们知道了如何构建JSON数据，让我们学习如何在JavaScript中访问它。我们将使用前面提到的"person"对象作为例子。

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // 输出：Alice
console.log(data.person.hobbies[1]); // 输出：cycling
console.log(data.person.address.city); // 输出：Wonderland

正如你所看到的，我们使用点符号来访问对象的属性，使用方括号来访问数组的元素。这就像按照地图找到你想要的确切信息！

JSON方法

JavaScript提供了两个主要用于处理JSON的方法：

方法	描述
JSON.parse()	将JSON字符串转换为JavaScript对象
JSON.stringify()	将JavaScript对象转换为JSON字符串

让我们看看这些方法的使用：

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 输出：John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // 输出：{"name":"Alice","age":25}

这些方法就像翻译，帮助JavaScript和JSON有效地交流。

JSON与JavaScript对象

虽然JSON看起来与JavaScript对象非常相似，但它们之间有一些关键的区别：

JSON的键必须是字符串，并且使用双引号。
JSON的值必须是以下类型之一：字符串、数字、对象、数组、布尔值或null。
JSON不支持函数或注释。

这里有一个快速的对比：

// 合法的JavaScript对象
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// 等效的JSON
let jsonObj = {
"name": "John",
"age": 30
};

注意在JSON版本中，函数和未加引号的键是不存在的。

将JSON字符串转换为JavaScript对象

我们已经看到了如何使用JSON.parse()将JSON字符串转换为JavaScript对象，但让我们看一个更复杂的例子：

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // 输出：Alice
console.log(obj.pets[0].name); // 输出：Fluffy

这在从服务器接收数据时特别有用，因为数据通常以JSON字符串的形式出现。

将JavaScript对象转换为JSON

同样，我们可以使用JSON.stringify()将JavaScript对象转换为JSON字符串。这在向服务器发送数据时通常很有必要。

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// 输出：{"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

就这样！你已经完成了JSON的速成课程。记住，熟能生巧，所以不要害怕实验创建和操作JSON数据。在你意识到之前，你将能够像专业人士一样处理JSON！

Credits: Image by storyset