
本教程旨在指导开发者如何在javascript中,依据一个嵌套对象(`values`)的键值,从另一个对象(`points`)中匹配并计算相应分数的总和。文章提供了多种实现策略,包括使用`reduce`进行迭代聚合,以及通过构建查找表进行高效数据匹配和求和,以满足复杂的数据处理需求。
在前端开发中,我们经常会遇到需要处理结构化数据并进行聚合计算的场景。一个典型的例子是,我们有两个JavaScript对象:一个包含用户选择或状态的嵌套对象,另一个则存储了这些选择对应的分数。我们的目标是根据第一个对象的键值,从第二个对象中查找对应的分数并计算总和。
考虑以下两个JavaScript对象作为示例数据:
const values = {
Q1: {
Q1A1: "Yes",
},
Q2: {
Q2A1: "Yes",
},
Q3: {
Q3A2: "No",
},
};
const points = {
Q1A1: 41,
Q1A2: 0,
Q2A1: 19,
Q2A2: 0,
Q3A1: 25,
Q3A2: 0, // 假设这里是0,如果题目要求Q3A2="No"不计分,则即使这里是5也应忽略
};登录后复制
我们的目标是根据values对象中嵌套的键(例如Q1A1、Q2A1)以及它们的值(例如"Yes"),从points对象中查找对应的分数并求和。例如,如果Q1A1是"Yes",则计入points.Q1A1的分数;如果Q3A2是"No",则不计分。最终结果应为41 + 19 = 60。
接下来,我们将探讨几种实现这一目标的JavaScript方法。

立即学习“Java免费学习笔记(深入)”;
方法一:使用嵌套 reduce 进行直接聚合
这种方法通过两次 reduce 迭代,直接遍历 values 对象的结构,并在满足条件时累加分数。
const values = {
Q1: { Q1A1: "Yes" },
Q2: { Q2A1: "Yes" },
Q3: { Q3A2: "No" },
};
const points = {
Q1A1: 41,
Q1A2: 0,
Q2A1: 19,
Q2A2: 0,
Q3A1: 25,
Q3A2: 5, // 假设这里是5,但由于Q3A2="No",此值不应被计入
};
const total = Object.values(values) // 获取values对象中所有Q1, Q2, Q3等子对象
.reduce((acc, cur) => { // 外层reduce用于遍历Q1, Q2, Q3等
return acc + Object.entries(cur) // 获取当前子对象(如{Q1A1: "Yes"})的键值对
.reduce((accInner, [key, val]) => { // 内层reduce用于遍历子对象中的键值对
// 判断条件:值不为'No' 且 points对象中存在对应的key,且其值为有效分数(非0或undefined)
// 注意:如果points[key]可能是0,但0也应该计入,则只需判断 points[key] !== undefined
if (val !== 'No' && points[key] !== undefined && points[key] !== null) {
return accInner + points[key];
}
return accInner;
}, 0); // 内层reduce的初始累加值为0
}, 0); // 外层reduce的初始累加值为0
console.log(total); // 输出: 60登录后复制
解析:
- Object.values(values):首先提取 values 对象中所有第一层的值,即 Q1, Q2, Q3 等子对象。
- 外层 reduce:遍历这些子对象。acc 是总累加器,cur 是当前的子对象(例如 { Q1A1: "Yes" })。
- Object.entries(cur):对于每个子对象,提取其键值对数组(例如 [['Q1A1', 'Yes']])。
- 内层 reduce:遍历子对象的键值对。accInner 是当前子对象的分数累加器,[key, val] 是当前的键值对。
- 条件判断:val !== 'No' 确保只有非"No"的答案才考虑计分。points[key] !== undefined && points[key] !== null 确保在 points 对象中存在对应的键,并且其值有效。如果points[key]可能为0且0也应计入,则只需 points[key] !== undefined。
- 如果条件满足,将 points[key] 的值加到 accInner 中。
这种方法简洁,直接在迭代过程中完成计算,适用于数据结构相对固定的情况。
标签: javascript java 前端 前端开发 键值对 red
还木有评论哦,快来抢沙发吧~