在开发企业应用的时候总会遇到树形汇总金额的场景,即将树形的列表中的叶子节点(没有子节点)的金额汇总到父节点上。

这种需求一般是在前端进行处理,即使用JavaScript处理,因为叶子节点的金额可能是不断改变的,每回变动都请求后台显然不现实。

场景与实现

假设有一个主从表的场景。第一点,从表是一个树形的列表,只有叶子节点能填写金额,父节点都汇总其下叶子节点的金额。第二点,主表有一个金额字段,取值汇总自汇总从表中所有根节点(顶级父节点)的金额。

先编写一个遍历从表中所有根节点的方法。

  1. function sumMoney2Main(items) {
  2.   let sumMoney = 0;
  3.   for (let item of items) {
  4.     this.sumMoneyToItsParent(item);
  5.     sumMoney += item.money || 0;
  6.   }
  7.   return sumMoney;
  8. }

然后编写一个递归汇总子节点金额的方法。

  1. function sumMoneyToItsParent(item) {
  2.   let sumMoney = 0;
  3.   if (item.children && item.children.length) {
  4.     for (let childItem of item.children) {
  5.       sumMoneyToItsParent(childItem);
  6.       sumMoney += childItem.money || 0;
  7.     }
  8.     item.money = sumMoney;
  9.   }
  10. }

这样就完成了树形汇总金额的需求。

简单分析

这里主要有几个要点。

1.在JavaScript中,数组中的对象都是保存在堆内存中的,栈内存中的变量只是保存的对这些对象的引用,因此在上面的代码中,无论将数组中的对象的引用赋予给多少个变量并做改动,实际上都是对数组中对象的改动,这是最基础的。这一特性被称为浅拷贝。

2.递归的要点是在遍历子节点的时候,先去遍历子节点的子节点,直到没有子节点了,才开始一级一级累加金额。

"他们都在看烟花,无人想起你。"

javascript树形汇总金额的更多相关文章

  1. Web应用程序开发,基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  2. Javascript知识点汇总-初级篇

    JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Fu ...

  3. 使用 JavaScript 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额

    查看本章节 查看作业目录 需求说明: 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额 消费金额在 200 元以上的会员折扣是 7.5 折,消费金额没有达到 200 元的会员折扣是 ...

  4. JavaScript学习汇总

    对于JavaScript,还是无法割舍,有心无力,时间总是匆匆,暂且都放在这里吧 javascript中this的使用 写的很不错的一偏文章,简单看了下,mark了吧 原文:http://davids ...

  5. javascript树形菜单简单实例

    参考博客地址:http://chengyoyo2006.blog.163.com/blog/static/8451734820087843950604/ <!DOCTYPE HTML PUBLI ...

  6. javascript算法汇总(持续更新中)

    1. 线性查找 <!doctype html> <html lang="en"> <head> <meta charset="U ...

  7. JavaScript将小写金额转换成大写

    //num为小写金额,单位元 changeMoney(num) { if(isNaN(num))return ""; var strPrefix=""; if( ...

  8. JavaScript操作符汇总

    操作符 JavaScript 有赋值.比较.算术.位.逻辑.字符串和特殊运算符.本章描述了操作符,以及关于操作符优先级的一些信息. 表 2.1 JavaScript 所有操作符简明列表. 表 2.1 ...

  9. JavaScript -- 知识点汇总

    js语法 1. javascript数据类型 JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型:有 字符串,数字, 布尔值, 对象, 数组,Undefined和Null 对象: v ...

随机推荐

  1. 2019/12/1 智能硬件实验室(ROS方向)

    浅谈安装ubuntu与ros感想 ubuntu 以前看电脑软件安装管家上的教程尝试在另一台电脑上安装ubuntu(虚拟机上),但是后面遇到了无法解决的问题,放弃了.这次因为选的ros方向,所以昨天在学 ...

  2. Python模块——loguru日志模块简单学习

    Python loguru模块简单学习 首先安装模块:pip install logoru,然后引入模块: from loguru import logger 1.直接输出到console logge ...

  3. 程序员的进阶课-架构师之路(9)-平衡二叉树(AVL树)

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...

  4. centos6安装pxc

    Percona XtraDB Cluster是一种高可用性解决方案,可帮助企业避免停机和中断. Percona XtraDB Cluster具有以下MySQL群集优势: • 具有成本效益的HA和MyS ...

  5. X86架构CPU常识(主频,外频,FSB,cpu位和字长,倍频系数,缓存,CPU扩展指令集,CPU内核和I/O工作电压,制造工艺,指令集,超流水线与超标量)

    1.主频 主频也叫时钟频率,单位是MHz,用来表示CPU的运算速度. CPU的主频=外频×倍频系数.很多人认为主频就决定着CPU的运行速度,这不仅是个片面的,而且对于服务器来讲,这个认识也出现了偏差. ...

  6. Error creating bean with name 'entityManagerFactory' defined in class path resource解决方案

    ​ 项目是集成了Spring Boot和Spring Data,然后昨天简单Jpa和Spring Boot配置完成,开始进行公司项目的重构,然后出现了这个问题.当时是在网上找了好久.后来发现时java ...

  7. webpack4.0(二)--热更新

    webpack4.0---热更新 使用webpack可帮助我们的开发以及打包,在开发过程中,有时候我们只修改了部分代码并想不必刷新整个页面即可看到更改后的效果,这时候 webpack-dev-serv ...

  8. nginx部署安装

    首先需要下载Nginx软件包 nginx软件官方下载地址:[nginx官方下载连接](http://www.nginx.org) 建议选择稳定的软件版本,如果练习使用当然是无所谓,随便什么版本都可以, ...

  9. mq解决分布式事物问题

    今天只看看原理,下一节看项目怎么集成mq进行解决分布式事物. 1.什么情况下会使用到分布式事物? 举例说明:现有一个支付系统,因为项目使用的是微服务框架,有订单模块和支付模块两个模块.生产者进行订单的 ...

  10. [TimLinux] JavaScript BOM浏览器对象模型

    1. 简介 ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网 ...