0

0

JavaScript中基于对象键值比较计算总和

碧海醫心

碧海醫心

发布时间:2025-12-08 17:46:02

|

929人浏览过

|

来源于php中文网

原创

javascript中基于对象键值比较计算总和

本文详细介绍了在JavaScript中,如何通过比较两个嵌套对象(`values` 和 `points`)的键来计算特定值的总和。我们将探讨多种实现策略,包括使用嵌套的 `reduce` 方法、构建查找表以及提取符合条件的键集,以高效且清晰地聚合数据。文章将提供具体的代码示例和详细解释,帮助开发者理解并应用这些技术处理类似的数据聚合需求。

在JavaScript开发中,我们经常会遇到需要从不同数据源聚合信息的场景。一个常见的需求是,根据一个对象中的特定条件,在另一个对象中查找对应的数值并进行求和。本教程将以一个具体的示例,展示如何有效地解决这类问题。

场景描述与初始数据

假设我们有两个JavaScript对象:values 和 points。 values 对象存储了问题及其对应答案的状态,例如 'Q1A1': 'Yes' 或 'Q3A2': 'No'。 points 对象则存储了每个具体答案键(如 Q1A1)对应的分数。

我们的目标是:遍历 values 对象,对于其中标记为 "Yes" 的答案键,在 points 对象中查找其对应的分数,并将这些分数累加起来。如果答案标记为 "No",则不计入总和。

以下是我们的示例数据:

立即学习Java免费学习笔记(深入)”;

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, // 注意:虽然有分数,但因 values 中 Q3A2 为 "No",所以不应计入
};

根据上述规则,我们期望的最终总和是 points.Q1A1 (41) + points.Q2A1 (19) = 60。

解决方案一:使用嵌套 reduce 进行直接计算

这种方法通过两次 reduce 操作直接遍历 values 对象并计算总和。外层 reduce 遍历 values 的顶层键(如 Q1, Q2),内层 reduce 则处理每个顶层键下的答案对象(如 { Q1A1: "Yes" })。

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,
};

const totalSum = Object.values(values) // 获取 values 对象中所有顶层属性的值(即 Q1, Q2, Q3 对应的对象)
  .reduce((accumulator, currentObject) => { // 外层 reduce 遍历这些对象
    // currentObject 示例:{ Q1A1: "Yes" }
    return accumulator + Object.entries(currentObject) // 获取当前对象的所有 [键, 值] 对
      .reduce((innerAccumulator, [answerKey, answerValue]) => { // 内层 reduce 处理每个答案键值对
        // answerKey 示例:Q1A1, answerValue 示例:Yes
        // 检查两个条件:
        // 1. answerValue 不等于 'No' (即为 'Yes' 或其他非 'No' 值)
        // 2. points 对象中存在对应的 answerKey 且其值为真(非0、null、undefined等)
        if (answerValue !== 'No' && points[answerKey]) {
          return innerAccumulator + points[answerKey];
        }
        return innerAccumulator;
      }, 0); // 内层 reduce 的初始值为 0
  }, 0); // 外层 reduce 的初始值为 0

console.log("方法一计算的总和:", totalSum); // 输出: 60

代码解析:

Nimo.space
Nimo.space

智能画布式AI工作台

下载
  • Object.values(values):将 values 对象的所有属性值(即 { Q1A1: "Yes" }, { Q2A1: "Yes" }, { Q3A2: "No" })组成一个数组。
  • 外层 reduce:遍历这个数组。accumulator 累积最终的总和。
  • Object.entries(currentObject):对于每个像 { Q1A1: "Yes" } 这样的对象,将其转换为 [['Q1A1', 'Yes']] 这样的数组。
  • 内层 reduce:遍历这些键值对。innerAccumulator 累积当前顶层问题(如 Q1)对应的分数。
  • 条件 answerValue !== 'No' && points[answerKey]:这是核心逻辑。它确保只有当 values 中的答案不是 "No" 并且 points 对象中存在该答案键且其值有效时,才将 points[answerKey] 加入到总和中。

解决方案二:创建查找表然后过滤并求和

这种方法首先从 values 对象中构建一个易于查询的查找表,其中只包含符合条件的答案键。然后,我们遍历 points 对象,根据查找表过滤出需要求和的项,最后进行累加。这种方法在逻辑上可能更清晰,尤其当 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,
};

// 步骤1: 创建一个查找表,只包含 values 中答案为 "Yes" 的键
const lookupTable = Object.values(values).reduce((acc, currentObject) => {
  const [answerKey, answerValue] = Object.entries(currentObject)[0]; // 假设每个内部对象只有一个键值对
  if (answerValue === "Yes") {
    acc[answerKey] = true; // 将符合条件的键添加到查找表,值可以是任意真值
  }
  return acc;
}, {});

console.log("查找表:", lookupTable); // 输出: { Q1A1: true, Q2A1: true }

// 步骤2: 遍历 points 对象,根据查找表过滤并求和
const totalSumWithLookup = Object.entries(points) // 获取 points 对象的所有 [键, 值] 对
  .filter(([key, score]) => lookupTable[key] && score) // 过滤:键存在于查找表且分数为真(非0、null等)
  .reduce((accumulator, [, score]) => accumulator + score, 0); // 对过滤后的分数进行求和

console.log("方法二计算的总和:", totalSumWithLookup); // 输出: 60

代码解析:

  • 创建查找表:
    • Object.values(values).reduce(...):与方法一类似,遍历 values 的顶层属性值。
    • [answerKey, answerValue] = Object.entries(currentObject)[0]:提取内部对象的键和值。
    • if (answerValue === "Yes") { acc[answerKey] = true; }:如果答案为 "Yes",则将该 answerKey 作为属性添加到 lookupTable 中,值为 true,表示该键是有效的。
  • 过滤并求和:
    • Object.entries(points):将 points 对象转换为 [[key, value], ...] 形式的数组。
    • .filter(([key, score]) => lookupTable[key] && score):筛选出那些键存在于 lookupTable 中(即 values 中对应的答案是 "Yes")且分数 score 本身是有效数值(非0、null、undefined)的条目。
    • .reduce((accumulator, [, score]) => accumulator + score, 0):对过滤后的条目中的分数进行累加。

解决方案三:提取键集合然后过滤并求和

此方法类似于方案二,但更侧重于仅提取 values 中符合条件的键到一个集合(Set)中,然后用这个集合来过滤 points。这种方法在处理大量键时,Set 的查找效率会比普通对象更高。

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,
};

// 步骤1: 从 values 中提取所有答案为 "Yes" 的键到一个 Set 中
const validAnswerKeys = Object.values(values).reduce((acc, currentObject) => {
  const [answerKey, answerValue] = Object.entries(currentObject)[0];
  if (answerValue === "Yes") {
    acc.add(answerKey); // 将符合条件的键添加到 Set
  }
  return acc;
}, new Set()); // 初始值为一个新的 Set

console.log("有效答案键集合:", validAnswerKeys); // 输出: Set(2) { 'Q1A1', 'Q2A1' }

// 步骤2: 遍历 points 对象,根据 Set 过滤并求和
const totalSumWithSet = Object.entries(points)
  .filter(([key, score]) => validAnswerKeys.has(key) && score) // 过滤:键存在于 Set 中且分数为真
  .reduce((accumulator, [, score]) => accumulator + score, 0);

console.log("方法三计算的总和:", totalSumWithSet); // 输出: 60

代码解析:

  • 提取有效键集合:
    • Object.values(values).reduce(..., new Set()):遍历 values 并使用 Set 作为累加器。
    • if (answerValue === "Yes") { acc.add(answerKey); }:如果答案为 "Yes",则将键添加到 Set 中。Set 自动处理重复键,确保每个键只出现一次。
  • 过滤并求和:
    • .filter(([key, score]) => validAnswerKeys.has(key) && score):使用 Set.prototype.has() 方法高效地检查 points 的键是否存在于 validAnswerKeys 集合中,同时检查分数是否有效。
    • .reduce((accumulator, [, score]) => accumulator + score, 0):对过滤后的分数进行累加。

总结与注意事项

以上提供了三种在JavaScript中根据条件比较两个对象并计算总和的方法。

  • 嵌套 reduce (方法一): 适用于逻辑紧密、一次性处理的场景。代码可能略显紧凑,但理解起来需要一定的 reduce 使用经验。
  • 创建查找表 (方法二): 逻辑清晰,将数据预处理和求和分为两个明确的步骤。当 values 对象较大或需要多次根据 values 的条件查询 points 时,预先构建查找表可以提高效率和可读性。
  • 提取键集合 (方法三): 与方法二类似,但使用 Set 来存储有效键。在键的数量非常大时,Set 的 has() 方法通常比普通对象的属性查找(lookupTable[key])具有更好的性能特性(平均O(1))。

注意事项:

  • 数据结构假设: 本教程中的 values 对象假设每个顶层属性(如 Q1)下只有一个嵌套的键值对(如 { Q1A1: "Yes" })。如果实际数据结构更复杂,例如 { Q1: { Q1A1: "Yes", Q1A2: "No" } },则需要调整内部 Object.entries(currentObject)[0] 的逻辑,可能需要遍历 currentObject 中的所有键值对。
  • 键不存在的处理: 在所有解决方案中,我们都通过 points[key] 或 score 的布尔值检查来确保 points 对象中存在相应的键且其值有效。如果 points[key] 为 undefined 或 0,它将不会被错误地添加到总和中(除非 0 是一个有效的分数并需要被累加,此时条件需要调整)。
  • 性能考量: 对于小型数据集,这三种方法的性能差异可以忽略不计。对于大型数据集,预处理(方法二和方法三)通常会比每次都进行复杂遍历(方法一)更有效率。Set 在键查找方面通常优于普通对象。

选择哪种方法取决于你的具体需求、数据规模以及你对代码可读性和性能的偏好。理解这些不同的技术将帮助你更灵活地处理JavaScript中的数据聚合任务。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

733

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

414

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1011

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

553

2023.09.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.19

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号