在前端开发中，处理 JSON 数据是一项基本技能。当我们从服务器端获取 JSON 响应时，需要将其解析为 JavaScript 对象，以便于在客户端进行操作和展示。本文将深入探讨 JavaScript 中如何解析 JSON 响应并获取其中的键值对。
什么是 JSON？
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它易于阅读和编写，并且广泛用于 Web 应用程序之间的数据传输。一个 JSON 对象由一个或多个键值对组成，每个键值对之间用逗号分隔，整个对象由花括号包围。
下面是一个简单的 JSON 对象示例：
{
"name": "John",
"age": 30,
"city": "New York"
}解析 JSON 响应
要解析 JSON 响应，我们可以使用 JavaScript 中的 JSON.parse() 方法。该方法将 JSON 字符串转换为 JavaScript 对象。
以下是一个示例，展示如何将 JSON 字符串解析为 JavaScript 对象：
const jsonString = '{ "name": "John", "age": 30, "city": "New York" }';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出 "John"
console.log(obj.age); // 输出 30
console.log(obj.city); // 输出 "New York"在上面的代码中，我们首先定义了一个 JSON 字符串 jsonString，然后使用 JSON.parse() 方法将其解析为 JavaScript 对象。最后，我们通过访问对象的属性来获取键值对。
获取键值对
一旦我们将 JSON 响应解析为 JavaScript 对象，就可以轻松地获取其中的键值对。以下是一些示例：
简单键值对
如果我们只需要获取一个简单的键值对，可以直接通过对象的属性访问：
const jsonString = '{ "name": "John", "age": 30, "city": "New York" }';
const obj = JSON.parse(jsonString);
const name = obj.name;
console.log(name); // 输出 "John"嵌套键值对
如果 JSON 对象中包含嵌套的键值对，我们可以使用点语法或方括号语法来访问它们：
const jsonString = '{ "person": { "name": "John", "age": 30, "city": "New York" } }';
const obj = JSON.parse(jsonString);
const personName = obj.person.name;
console.log(personName); // 输出 "John"或者：
const jsonString = '{ "person": { "name": "John", "age": 30, "city": "New York" } }';
const obj = JSON.parse(jsonString);
const personName = obj["person"]["name"];
console.log(personName); // 输出 "John"数组键值对
如果 JSON 对象中包含数组键值对，我们可以使用索引来访问它们：
const jsonString = '{ "fruits": ["Apple", "Banana", "Orange"] }';
const obj = JSON.parse(jsonString);
const firstFruit = obj.fruits[0];
console.log(firstFruit); // 输出 "Apple"总结
在本文中，我们学习了如何解析 JSON 响应并获取其中的键值对。我们使用 JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象，然后通过访问对象的属性来获取键值对。我们还讨论了嵌套键值对和数组键值对的情况，并展示了一些示例代码。希望这篇文章能够帮助你更好地处理 JSON 数据！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24361