Javascript：数组reduce累计方法

听海边涛声

已于 2024-07-04 10:35:11 修改

阅读量339

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2024-07-04 09:50:47 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140168893

版权

Array是内置的构造函数，用于创建数组
创建数组建议使用字面量创建，不用Array构造函数创建

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = new Array(1, 3, 5)
    console.log(arr)
  </script>
</body>

</html>

在这里插入图片描述

数组实例方法reduce

数组实例方法reduce，是累计器，返回累计处理的结果，常用于求和等。

基本语法：

arr.reduce(function(上一次值, 当前值) {}, 初始值)

如果有初始值这个参数，则把初始值累加到里面。如果没有初始值，则只计算数组元素。

reduce的执行过程：

如果没有初始值，则开始把数组的第一个元素的值作为上一次的值。
每一次循环，把返回值作为下一次循环的上一次值。
如果有起始值，则把起始值作为上一次值。

示例：没有初始值的情况

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [1, 5, 8]

    // 1. 没有初始值的情况
    const total = arr.reduce(function (prev, current) {
      return prev + current
    })
    console.log(total)
  </script>
</body>

</html>

在这里插入图片描述

示例：有初始值的情况

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [1, 5, 8]
    // 有初始值的情况
    const total = arr.reduce(function (prev, current) {
      return prev + current
    }, 10)
    console.log(total)
  </script>
</body>

</html>

在这里插入图片描述

示例：用箭头函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [1, 5, 8]
    // 箭头函数的写法
    const total = arr.reduce((prev, current) => prev + current, 10)
    console.log(total)
  </script>
</body>

</html>

在这里插入图片描述

示例：数组元素是对象时，要将初始值设置为0

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const arr = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 10000
    },
    ]

	// 数组元素是对象时，初始值不能省略，设置为0
    const total = arr.reduce((prev, current) => {
      return prev + current.salary
    }, 0)
    console.log(total)
  </script>
</body>

</html>