reduce方法

console.log(movements);

在这里插入图片描述

● 例如上述这个列表存储了一个用户每次取钱和存钱的一个过程,我们要将这个数组中所有的数组加起来,来了解他的余额到底有多少钱,这就需要用到reduce方法

const balance = movements.reduce(function (acc, cur, i, arr) {
  return acc + cur;
}, 0);

console.log(balance);

在这里插入图片描述

注:
1. reduce的回调函数中可以接受四个参数,它们分别是:
● 累加器(accumulator):累加器是reduce函数的第一个参数,它是上一次回调函数的返回值,或者是初始值(如果没有提供初始值的话)。
● 当前元素(current element):当前正在处理的数组元素。
● 当前索引(current index):当前正在处理的数组元素的索引。
● 原数组(array):调用reduce方法的数组本身。
2. reduce参数中最后会给一个初始值,为0

● 我们可以打印除每一步的累加情况

const balance = movements.reduce(function (acc, cur, i, arr) {
  console.log(`Iteration ${i}: ${acc}`);
  return acc + cur;
}, 0);

console.log(balance);

在这里插入图片描述

● 当然我们也可以使用for…of来实现同样的效果

let balance2 = 0;
for (const mov of movements) balance2 += mov;
console.log(balance2);

在这里插入图片描述

● 上面的reduce方法我们也可以使用箭头函数的方式来简化代码

const balance = movements.reduce((acc, cur) => acc + cur, 0);
console.log(balance);

在这里插入图片描述

● 现在我们就可以通过这个方法来计算这个页面的用户余额了

const calcDisplayBalance = function (movements) {
  const balance = movements.reduce((acc, mov) => acc + mov, 0);
  labelBalance.textContent = `${balance} EUR`;
};
calcDisplayBalance(account1.movements);

在这里插入图片描述

● 这个目前需要手动去执行账户中的key,后面会慢慢的去优化

● 但是请记住,reduce不仅仅是计算数组中的和,它的作用是可以将数组变为一个单一的值,比如也可以计算数组的最大值

const maxNum = movements.reduce((acc, cur) => {
  if (acc > cur) {
    return acc;
  } else {
    return cur;
  }
}, movements[0]);
console.log(maxNum);

在这里插入图片描述

上一篇:智能合约:未来数字经济的基石


下一篇:css文本溢出处理——单行、多行-常用属性: