处理 JavaScript 中的 JSON 对象数组
处理来自 JSON 响应或 API 端点的数据时，常常会遇到 JSON 对象数组的情况。本篇文章探讨如何有效地解析和操作这种数据结构，以及在 JavaScript 中循环访问数组内的对象属性。
问题分析
目标是将一个包含 JSON 对象的数组传入一个 JavaScript 函数，并在此函数中能够遍历该数组，访问每个对象的属性，并执行相应的操作。关键步骤包括：
数据解析: 将 JSON 字符串转换为 JavaScript 对象数组。
数组遍历: 使用循环结构访问数组中的每个对象。
属性访问: 访问每个对象上的特定属性。
解决方案
这里提供两种解决思路，第一种利用 JSON.parse()，另一种则使用已经为 JavaScript 对象数组的变量。
方法一: JSON.parse() 解析 JSON 字符串
如果函数的输入是 JSON 字符串，则需使用 JSON.parse() 函数将其转换为 JavaScript 对象数组。这个方法解析字符串，返回一个可操作的 JavaScript 数据结构。然后，可利用标准 JavaScript 数组操作对其进行处理。
function processJsonArray(jsonString) {
try {
const data = JSON.parse(jsonString);
if (!Array.isArray(data)) {
console.error("Error: Input is not a valid JSON array.");
return;
}
data.forEach(item => {
if(item && typeof item === 'object' && item.hasOwnProperty('id') && item.hasOwnProperty('Title'))
{
console.log("ID:", item.id);
console.log("Title:", item.Title);
// 执行其它基于 'id' 和 'Title' 的操作...
} else {
console.warn("Warning: Skipped item due to incorrect object structure.", item);
}
});
} catch (e) {
console.error("Error: Invalid JSON string. Error:", e);
}
}
const jsonExample = `[
{
"id": 28,
"Title": "Sweden"
},
{
"id": 56,
"Title": "USA"
},
{
"id": 89,
"Title": "England"
}
]`;
processJsonArray(jsonExample)
操作步骤:
解析: 调用 JSON.parse(jsonString) 将 JSON 字符串转换为 JavaScript 对象数组。
校验: 使用 Array.isArray(data) 检测解析结果是否是数组。非数组的情况给出错误提示。
遍历: 使用 forEach 方法遍历数组的每个元素。
校验: 在访问对象的属性前，增加对象存在和对象属性校验。使用 item && typeof item === 'object'确保 item是一个有效对象，使用item.hasOwnProperty('id') 和 item.hasOwnProperty('Title') 确保对象有对应的 id 和 Title 属性。若存在数据格式错误的对象则给出警告。
访问: 使用点号（.）或方括号（[]）访问对象的属性（例如：item.id, item['Title']）。
处理: 针对每个对象及其属性值执行具体操作。这里只是在控制台输出。
额外提示： 使用 try...catch 语句，提高代码的健壮性，能捕获因无效 JSON 字符串引发的错误。
方法二：直接操作 JavaScript 对象数组
如果函数接收的是已经解析好的 JavaScript 对象数组，无需使用 JSON.parse()。 直接利用 JavaScript 数组操作和属性访问方法即可。
function processObjectArray(dataArray) {
if (!Array.isArray(dataArray)) {
console.error("Error: Input is not an array of objects.");
return;
}
dataArray.forEach(item => {
if(item && typeof item === 'object' && item.hasOwnProperty('id') && item.hasOwnProperty('Title')) {
console.log("ID:", item.id);
console.log("Title:", item.Title);
//执行其它基于 'id' 和 'Title' 的操作...
} else {
console.warn("Warning: Skipped item due to incorrect object structure.", item);
}
});
}
const arrayExample = [
{
"id": 28,
"Title": "Sweden"
}, {
"id": 56,
"Title": "USA"
}, {
"id": 89,
"Title": "England"
}
];
processObjectArray(arrayExample);
操作步骤:
校验: 使用 Array.isArray(dataArray) 检查输入是否为数组。
遍历: 使用 forEach 遍历数组的每个对象元素。
校验: 类似方法一，在访问属性前，检查元素是否为对象，且存在对应的属性。
访问: 使用 . 或 [] 操作符，访问每个对象的属性，进行相关处理。
安全提示
输入校验： 始终检查 JSON.parse() 的输出结果，避免处理格式错误或数据缺失的 JSON 数据。
类型校验 始终确保要访问的属性存在于对象中，在进行相关处理之前，做好类型判断。
错误处理: 使用 try...catch 代码块捕捉解析错误或其他运行时异常。
数据清洗： 如果数据来源不可信，对读取的数据做适当的清洗和过滤，确保数据类型符合要求。