在 JavaScript 中使用 JSON.parse() 方法解析 JSON 对象
在 JavaScript 中编码 JSON 对象
从 Web 服务器接收数据时，格式为 JSON（Web 应用程序的数据交换格式）。该格式以 key:value 对形式预览数据，并以 {}（对于对象）或 []（对于数组）开头和结尾。键总是倾向于是字符串，值也可以是字符串和其他数据类型。
本文将介绍如何在 JavaScript 中从 JSON 对象中获取值。
在 JavaScript 中使用 JSON.parse() 方法解析 JSON 对象
让我们将以下 JSON 对象视为接收到的数据。
注意
JSON 解析不支持单引号。
{
"employee": {
"name": "Roy Mustang",
"age": 35,
"favoriteColor": ["Blue", "Black", "Purple"],
"siblings": {
"Liza": 20, "Emily": 12
}
}
}
以下代码段和图像演示了解析方法。
代码片段：
const json = `{
"employee": {
"name": "Roy Mustang",
"age": 35,
"favoriteColor": ["Blue", "Black", "Purple"],
"siblings": {
"Liza": 20, "Emily": 12
}
}
}`;
var data = JSON.parse(json);
var i;
for (i in data) {
if (data[i] instanceof Object) {
console.log(data[i]);
}
}
输出：
在 JavaScript 中使用点 (.) 操作访问单个 JSON 数据
由于我们已经解析了数据，现在让我们使用点 (.) 操作提取 key:value 对的各个值。
代码片段：
const json = `{
"employee": {
"name": "Roy Mustang",
"age": 35,
"favoriteColor": ["Blue", "Black", "Purple"],
"siblings": {
"Liza": 20, "Emily": 12
}
}
}`;
var data = JSON.parse(json);
console.log(data.employee.name);
console.log(data.employee.favoriteColor[2]);
console.log(data.employee.siblings);
console.log(data.employee.siblings.Liza);
输出：
在 JavaScript 中使用括号 [] 访问单个 JSON 数据
此约定允许你以类似于数组访问其数据的类似方式检索数据。
代码片段：
const json = `{
"employee": {
"name": "Roy Mustang",
"age": 35,
"favoriteColor": ["Blue", "Black", "Purple"],
"siblings": {
"Liza": 20, "Emily": 12
}
}
}`;
var data = JSON.parse(json);
console.log(data['employee']['name']);
console.log(data['employee']['favoriteColor'][2]);
console.log(data['employee']['siblings']);
console.log(data['employee']['siblings']['Emily']);
输出：
在 JavaScript 中编码 JSON 对象
假设你要修改一个 JSON 对象并重新发送回服务器，或者任务是将 JavaScript 转换为 JSON 格式。这通常很有帮助，因为很难编辑大型 JSON 对象。因此，在解析对象并将其重定向到相同的格式后，我们使用 JSON.stringify 方法。
代码片段：
const json = `{
"employee": {
"name": "Roy Mustang",
"age": 35,
"favoriteColor": ["Blue", "Black", "Purple"],
"siblings": {
"Liza": 20, "Emily": 12
}
}
}`;
var data = JSON.parse(json);
data.employee.name = 'Riza Hawkeye';
const new_data = JSON.stringify(data);
console.log(new_data);
输出：
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe