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);  //调用函数
相关推荐
EndingCoder几秒前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte5 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang10 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
沉默媛21 分钟前
如何安装python以及jupyter notebook
开发语言·python·jupyter
_Chipen1 小时前
C++基础问题
开发语言·c++
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript