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);  //调用函数
相关推荐
桃园码工17 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
Am心若依旧40924 分钟前
[c++11(二)]Lambda表达式和Function包装器及bind函数
开发语言·c++
明月看潮生26 分钟前
青少年编程与数学 02-004 Go语言Web编程 20课题、单元测试
开发语言·青少年编程·单元测试·编程与数学·goweb
大G哥36 分钟前
java提高正则处理效率
java·开发语言
VBA63371 小时前
VBA技术资料MF243:利用第三方软件复制PDF数据到EXCEL
开发语言
轩辰~1 小时前
网络协议入门
linux·服务器·开发语言·网络·arm开发·c++·网络协议
小_太_阳1 小时前
Scala_【1】概述
开发语言·后端·scala·intellij-idea
百万蹄蹄向前冲1 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
向宇it1 小时前
【从零开始入门unity游戏开发之——unity篇02】unity6基础入门——软件下载安装、Unity Hub配置、安装unity编辑器、许可证管理
开发语言·unity·c#·编辑器·游戏引擎
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos