本文旨在帮助开发者高效地从嵌套 JSON 对象中提取并整理数据，特别是针对需要扁平化数据结构并获取唯一值的情况。我们将通过一个实际示例，展示如何使用 JavaScript 的 reduce 方法和辅助函数，避免多重循环，从而优化数据处理的性能，最终获得清晰、易于访问的数据结构。
理解问题：嵌套 JSON 数据的挑战
在 Web 开发中，我们经常需要处理从 API 接口获取的 JSON 数据。这些数据往往具有复杂的嵌套结构，例如包含数组和对象的层层嵌套。直接使用多重循环遍历这些数据，不仅代码可读性差，而且在数据量较大时，性能也会受到影响。
解决方案：使用 reduce 方法扁平化数据
为了解决这个问题，我们可以使用 JavaScript 的 reduce 方法，结合一个辅助函数，将嵌套的 JSON 数据扁平化，并提取所需的信息。
示例数据：
立即学习“Java免费学习笔记（深入）”；
假设我们有以下 products 数组，它包含多个产品对象，每个产品对象包含 brand、category 和 attributes 等属性。attributes 属性是一个数组，每个元素包含 name 和 attribute_values 属性。
const products = [{
"brand": "xyz",
"category": "T-shirt",
"attributes": [{
"name": "color",
"attribute_values": [{
"value": "blue"
},
{
"value": "green"
}
]
},
{
"name": "size",
"attribute_values": [{
"value": "18"
}]
}
]
}, {
"brand": "abc",
"category": "T-shirt",
"attributes": [{
"name": "color",
"attribute_values": [{
"value": "red"
},
{
"value": "yellow"
}
]
},
{
"name": "size",
"attribute_values": [{
"value": "20"
}]
}
]
}];辅助函数 updateValue：
这个函数用于更新累加器对象 (acc) 中的值。如果累加器对象中已经存在该键，则将新值添加到现有值数组中；否则，创建一个新的数组，并将新值添加到该数组中。
const updateValue = (key, value, ar) => {
var newVal = [];
if (ar[key]) {
newVal = ar[key];
newVal = Array.isArray(value) ? [...newVal, ...value] : [...newVal, value]
} else {
newVal = Array.isArray(value) ? [...value] : [value]
}
return newVal;
}使用 reduce 方法：
let obj = products.reduce((acc, k) => {
for (const [key, value] of Object.entries(k)) {
// 特殊处理 attributes 属性
if (key === 'attributes') {
value.forEach(attribute => {
const attributeName = attribute.name;
attribute.attribute_values.forEach(attributeValue => {
const attributeValueValue = attributeValue.value;
acc = {
...acc,
[attributeName]: updateValue(attributeName, attributeValueValue, acc)
};
});
});
} else {
acc = {
...acc,
[key]: updateValue(key, value, acc)
}
}
}
return acc;
}, {});
console.log(obj);代码解释：
- products.reduce((acc, k) => { ... }, {}): 使用 reduce 方法遍历 products 数组。acc 是累加器对象，初始值为空对象 {}。k 是当前遍历到的产品对象。
- for (const [key, value] of Object.entries(k)) { ... }: 使用 Object.entries 方法遍历产品对象的属性。key 是属性名，value 是属性值.
- updateValue(key, value, acc): 调用 updateValue 函数更新累加器对象中的值。
- acc = { ...acc, [key]: updateValue(key, value, acc) }: 将更新后的累加器对象赋值给 acc。
- 针对 attributes 属性进行特殊处理，提取 name 和 value，并合并到最终结果中。
输出结果：
{
"brand": [
"xyz",
"abc"
],
"category": [
"T-shirt",
"T-shirt"
],
"color": [
"blue",
"green",
"red",
"yellow"
],
"size": [
"18",
"20"
]
}优化：去重
如果需要去除重复值，可以在 updateValue 函数中添加去重逻辑。
const updateValue = (key, value, ar) => {
var newVal = [];
if (ar[key]) {
newVal = ar[key];
const valuesToAdd = Array.isArray(value) ? value : [value];
valuesToAdd.forEach(val => {
if (!newVal.includes(val)) {
newVal.push(val);
}
});
} else {
newVal = Array.isArray(value) ? [...new Set(value)] : [value];
}
return newVal;
}总结
通过使用 reduce 方法和辅助函数，我们可以有效地扁平化嵌套的 JSON 数据，并提取所需的信息。这种方法不仅代码简洁易懂，而且在数据量较大时，性能也优于多重循环。 在实际应用中，可以根据数据的具体结构和需求，对代码进行适当的调整和优化。例如，可以添加错误处理机制，或者使用更高级的数据结构来存储和处理数据。
