JavaScript方法链的魔力

如果我们想将用户存取款的数组数据进行一系列的操作,我们可以将所有的方法进行组合,例如我们取出所有的的存款数据,然后将存款转换为美元,然后再将转换后的美元进行累加;

javascript 复制代码
const eurToUsd = 1.1;
const totalDepositsUSD = movements
  .filter(mov => mov > 0)
  .map(mov => mov * eurToUsd)
  .reduce((acc, mov) => acc + mov, 0);
console.log(totalDepositsUSD);

● 按照上面的方法,我们可以继续我们的银行家应用程序了

● 上图显示的是用户的存款数,我们使用方法链的方式去实现它

javascript 复制代码
const calcDisplaySummary = function (movements) {
  const incomes = movements
    .filter(mov => mov > 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumIn.textContent = `${incomes}€`;
};

calcDisplaySummary(account1.movements);

● 同样的操作,我们计算除取款和银行的利息

javascript 复制代码
const calcDisplaySummary = function (movements) {
  const incomes = movements
    .filter(mov => mov > 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumIn.textContent = `${incomes}€`;

  const out = movements
    .filter(mov => mov < 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumOut.textContent = `${Math.abs(out)}€`;

  const interest = movements
    .filter(mov => mov > 0)
    .map(deposit => (deposit * 1.2) / 100)
    .reduce((acc, int) => acc + int, 0);
  labelSumInterest.textContent = `${interest}€`;
};

calcDisplaySummary(account1.movements);

● 但是如果存款的每一笔利息如果小于1的话,就会被银行给过滤掉,所以我们还需要在利息的函数中添加一个过滤条件

const calcDisplaySummary = function (movements) { //创建一个函数,接受一个数组参数

javascript 复制代码
  const incomes = movements   //创建存款变量
    .filter(mov => mov > 0)   //过滤数组中大于0的值
    .reduce((acc, mov) => acc + mov, 0);  //将数组中大于0的值进行一个累加
  labelSumIn.textContent = `${incomes}€`; //将累加后的值赋值给HTML元素中

  const out = movements   //创建取款变量
    .filter(mov => mov < 0)  //过滤数组中小于0的值
    .reduce((acc, mov) => acc + mov, 0);//将数组中小于0的值进行一个累加
  labelSumOut.textContent = `${Math.abs(out)}€`; //将累加后的值赋值给HTML元素中,并给最后的结果取绝对值

  const interest = movements  //创建利息变量
    .filter(mov => mov > 0) //过滤数组中大于0的值
    .map(deposit => (deposit * 1.2) / 100) //将每一笔存款的值乘以利息再取百分比
    .filter(int => int >= 1) //过滤每一笔利息小于1的值
    .reduce((acc, int) => acc + int, 0);  //将每一笔利息进行累加
  labelSumInterest.textContent = `${interest}€`;  //将累加后的值赋于给HTML元素
};

calcDisplaySummary(account1.movements);  //调用函数
相关推荐
因吹斯汀3 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡7 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧8 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼9 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
土了个豆子的17 分钟前
02.继承MonoBehaviour的单例模式基类
开发语言·visualstudio·单例模式·c#·里氏替换原则
qq_1728055923 分钟前
Go 自建库的使用教程与测试
开发语言·后端·golang
irving同学4623828 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
久绊A29 分钟前
Hydra-SSH 破解安全防范
开发语言·php
彭于晏爱编程30 分钟前
你真的了解 Map、Set 嘛
前端
崔璨34 分钟前
详解Vue3的响应式系统
前端·vue.js