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);  //调用函数
相关推荐
石金龙7 分钟前
[译] Composition in CSS
前端·css
白水清风10 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix22 分钟前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780022 分钟前
new、原型和原型链浅析
前端·javascript
阿星做前端22 分钟前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧22 分钟前
Promise 的使用
前端·javascript
NBtab40 分钟前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码1 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG2 小时前
Jenkins打包问题
前端·npm·jenkins