一次性弄清楚reduce方法使用

前言

🥺JS中有很多数组的方法，有的方法非常的简单我们使用起来完全没有难度，但是JS中有一个方法是公认的强大且难以理解的，那就是reduce，如果你能够灵活的理解和使用reduce你会发现处理数据会变的很轻松，那么就让我们从头了解并学习使用reduce吧~

一.基本使用方法

js 复制代码

array.reduce(callback, initialValue)

🤢reduce方法接收两个参数，第一个参数是一个回调函数，第二个参数是一个初始化数据，这个待会会详细的讲解它的用法，其中callback接收4个参数分别是accumulate：累积器 item：当前元素 index：当前数据索引 Array：原数组，单纯看这些参数我们可能不太好理解，那么我们就用一个小例子来讲解下用法

js 复制代码

let array = [1, 2, 3, 4, 5, 6, 7]
array.reduce((accumulate, item, index, metaArray) => {
  console.log("累积器：", accumulate)
  console.log("当前项：", item)
  console.log("当前索引：", index)
  console.log("原数组：", metaArray)
  return accumulate + item
}, 9)

🤡我们可以看下这个代码的执行结果

从执行结果我们一项一项的看下，首先第一项的累积器如果我们没有设置初始值的话，初始值是这个数组的第一个元素，当前项就相当于forEach中的item表示当前项，索引就是index表示当前索引内容，metaArray就是表示当前数组本身，一直是一个定值表示原数组。

其他几项比较好理解，可能大家主要比较难以理解的地方是累积器和初始值，可能在别的地方你可能听到累积器被称为累加器，但是我觉得这个称呼是不准确的，可能大家大多数的时候使用reduce来做累加器，但是实际上这只是非常简单的一个用法，我们也可是实现基础的加减乘除，数组的处理等等，

🤗首先我们来先理解一下累积器,我们使用大家最熟悉的例子来讲解，就像下面这个简单的例子，这个操作是一个累加的操作，它的累积器的操作流程是下图所展示的。

js 复制代码

let array = [1,2,3,4,5]
array.reduce((acc,item)=>{
  return acc + item
},0)

累积器和当前项会作为下一数组数据项的初始累积器，累积器可以和当前项进行任何操作，常见的有加减乘除等等，接下来我们使用reduce来简单的实现下加减乘除

js 复制代码

let array = [1, 2, 3, 4, 5, 6]

// 累加
let addValue = array.reduce((acc, item) => {
  return acc + item
}, 100)

// 累减
let delValue = array.reduce((acc, item) => {
  return acc - item
}, 100)

// 累乘

let mutipyValue = array.reduce((acc, item) => {
  return acc * item
}, 100)

// 累除

let dddValue = array.reduce((acc, item) => {
  return acc / item
}, 100)

console.log(addValue) 
console.log(delValue)
console.log(mutipyValue)
console.log(dddValue)

二.reduce处理常见数据

🥰使用reduce计算数组[1,2,3,4,5,6,7,8,9]中数据的平均值

js 复制代码

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let average = array.reduce((acc, item, index, curArray) => {
  let sum = acc + item
  if (index === curArray.length - 1) {
    return sum / curArray.length
  } else {
    return sum
  }
}, 0)

console.log(average) // 5

🐻使用reduce查找去一组数据中的最大值，这个例子可以让你更加深刻的理解reduce方法的使用。

js 复制代码

const numbers = [10, 5, 20, 15, 25]

const max = numbers.reduce((accumulator, currentValue) => {
  console.log(accumulator, "累积器的值")
  return Math.max(accumulator, currentValue)
}, 0)

console.log(max)  // 输出：25

😀使用reduce将数组中的数据连接成一个句子

js 复制代码

const words = ["Hello", "world", "how", "are", "you"];

const sentence = words.reduce((accumulator, currentValue) => {
  return accumulator + " " + currentValue;
});

console.log(sentence);  // 输出：Hello world how are you

🥲将数组中对象提取为一个新的数组

js 复制代码

const students = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 22 },
  { name: "Charlie", age: 18 }
];

const names = students.reduce((accumulator, currentValue) => {
  accumulator.push(currentValue.name);
  return accumulator;
}, []);

console.log(names);  // 输出：["Alice", "Bob", "Charlie"]

三.总结

🤬reduce方法是一个非常强大的方法，可以将很多复杂的结构进行简单的处理，是在开发中的一个非常重要的利器，本文章给出的例子比较有限，其余常见操作可以多多研究，多多使用。