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

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

场景与实现

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

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

function sumMoney2Main(items) {
  let sumMoney = 0;
  for (let item of items) {
    this.sumMoneyToItsParent(item);
    sumMoney += item.money || 0;
  }
  return sumMoney;
}

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

function sumMoneyToItsParent(item) {
  let sumMoney = 0;
  if (item.children && item.children.length) {
    for (let childItem of item.children) {
      sumMoneyToItsParent(childItem);
      sumMoney += childItem.money || 0;
    }
    item.money = sumMoney;
  }
}

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

简单分析

这里主要有几个要点。

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. Java 数据类型、变量

    Java 数据类型   在 Java 中,对于每一种数据都定义了明确的具体的数据类型,在内存中分配了不同大小的内存空间. 整数类型 (byte.short.int.long) 1.Java 各整数类型 ...

  2. MYSQLnavicat绿色版工具下载

    MYSql远程连接工具navicat工具:https://pan.baidu.com/s/1RU_8FCX7yCseAFRhn4voAQ

  3. AppBoxFuture: 集成第三方Sql数据库

      框架设计之初是不准备支持第三方数据库的,但最近几个朋友都提到需要将旧的基于传统Sql数据库的应用迁移到框架内,主要是考虑到一方面目前框架内置的分布式数据库尚未完善,另一方面是希望能逐步迭代旧应用替 ...

  4. Deep attention tracking via Reciprocative Learning

    文章:Deep attention tracking via Reciprocative Learning 出自NIPS2018 文章链接:https://arxiv.org/pdf/1810.038 ...

  5. STDN: Scale-Transferrable Object Detection论文总结

    概述 STDN是收录于CVPR 2018的一篇目标检测论文,提出STDN网络用于提升多尺度目标的检测效果.要点包括:(1)使用DenseNet-169作为基础网络提取特征:(2)提出Scale-tra ...

  6. PowerMock学习(七)之Mock Constructor的使用

    前言 我们在编码的时候,总习惯在构造器中传参数,那么在powermock中是怎么模拟带参数构造的呢,这并不难. 模拟场景 我们先模拟这样一个场景,通过dao中的传入一个是布尔类型(是否加载)和一个枚举 ...

  7. Spring中常见的设计模式——原型模式

    1.原型模式应用场景 当遇到大量耗费劳动力的 get,set赋值场景时,如下: public class SetGetParam { public void setParam(UserDto user ...

  8. leetcode105 从前序与中序遍历序列构造二叉树

    如何遍历一棵树 有两种通用的遍历树的策略: 宽度优先搜索(BFS) 我们按照高度顺序一层一层的访问整棵树,高层次的节点将会比低层次的节点先被访问到. 深度优先搜索(DFS) 在这个策略中,我们采用深度 ...

  9. C#语法--委托,架构的血液

    委托的定义 什么是委托? 委托实际上是一种类型,是一种引用类型. 微软用delegate关键字来声明委托,delegate与int,string,double等关键字一样.都是声明用的. 下面先看下声 ...

  10. [动图演示]Redis 持久化 RDB/AOF 详解与实践

    Redis 是一个开源( BSD 许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件.它支持的数据类型很丰富,如字符串.链表.集 合.以及散列等,并且还支持多种排序功能. 什么叫持 ...