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);  //调用函数
相关推荐
nbsaas-boot1 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7892 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨2 小时前
GO 启动 简单服务
开发语言·后端·golang
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
斯普信专业组2 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构