笔记大全

吃透js中的Array reduce方法

更新时间：2023-12-09

第一段：介绍reduce方法及其参数

reduce()方法可以对数组中的每个元素进行累加器操作，返回一个值。该方法接收两个参数：累加器函数和初始值。累加器函数又分为两个参数：累加器和当前值。以下是reduce方法的语法：

arr.reduce(callback[, initialValue])

其中，callback函数接收四个参数:

accumulator（必须）：累加器累计回调的返回值。它是上一次调用回调时返回的累计值，或者是提供的 initialValue。
currentValue（必须）：数组中正在被处理的元素。
currentIndex：数组中正在被处理的当前元素的索引。如果提供了 initialValue，则索引号为0，否则为1。
array（必须）：调用 reduce()的数组。

initialValue是累加器函数第一次被调用时的第一个值。如果省略了初始值，那么reduce()将从索引1开始执行callback函数，跳过数组中的第一个项。如果数组为空且没有提供初始值，会抛出TypeError。如果数组只有一个元素（无论位置是哪个），并且没有提供初始值，或者有提供初始值，那么这个元素将会被返回并且callback不会被执行。

第二段：一些简单的累加器函数

这里提供三种不同的累加器函数示例：

1. 求和

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

2. 拼接

const words = ["the", "quick", "brown", "fox"];
const sentence = words.reduce((accumulator, currentValue) => accumulator + " " + currentValue);
console.log(sentence); // "the quick brown fox"

3. 对象合并

const objects = [{ x: 1 }, { y: 2 }, { z: 3 }];
const merged = objects.reduce((accumulator, currentValue) => Object.assign(accumulator, currentValue));
console.log(merged); // { x: 1, y: 2, z: 3 }

第三段：reduce用于计算平均数和最大值

在这里，我们用reduce方法来计算平均数和最大值

1. 计算平均数

const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((accumulator, currentValue, index, array) => {
  accumulator += currentValue;
  if (index === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
});
console.log(average); // 3

2. 找出最大值

const numbers = [1, 2, 3, 4, 5];
const max = numbers.reduce((a, b) => {
  return Math.max(a, b);
});
console.log(max); // 5

第四段：reduce与map结合使用

结合map()方法和reduce()方法可以实现更加复杂的操作。下面是一个例子，将一个包含对象的数组按照属性值分组，返回一个包含对象的新数组。

const songs = [
  { name: "Sultans of Swing", artist: "Dire Straits", year: 1978 },
  { name: "Yesterday", artist: "The Beatles", year: 1965 },
  { name: "The Times They Are A-Changin'", artist: "Bob Dylan", year: 1964 },
  { name: "Help!", artist: "The Beatles", year: 1965 },
  { name: "Money for Nothing", artist: "Dire Straits", year: 1985 }
];

const groupedSongs = songs.reduce((accumulator, currentValue) => {
  const year = currentValue.year;
  const existingArray = accumulator.find(element => element.year === year);
  if (existingArray) {
    existingArray.songs.push(currentValue);
  } else {
    accumulator.push({ year: year, songs: [currentValue] });
  }
  return accumulator;
}, []);

console.log(groupedSongs);
/*
[
  {
    "year": 1978,
    "songs": [
      {
        "name": "Sultans of Swing",
        "artist": "Dire Straits",
        "year": 1978
      }
    ]
  },
  {
    "year": 1965,
    "songs": [
      {
        "name": "Yesterday",
        "artist": "The Beatles",
        "year": 1965
      },
      {
        "name": "Help!",
        "artist": "The Beatles",
        "year": 1965
      }
    ]
  },
  {
    "year": 1964,
    "songs": [
      {
        "name": "The Times They Are A-Changin'",
        "artist": "Bob Dylan",
        "year": 1964
      }
    ]
  },
  {
    "year": 1985,
    "songs": [
      {
        "name": "Money for Nothing",
        "artist": "Dire Straits",
        "year": 1985
      }
    ]
  }
]
*/

总结：

Array.reduce()是一种非常强大的方法，可以用于许多不同的场景。在其最基本的用例中，reduce()可以用来计算数组中所有元素的总和或者平均数。

reduce()还可以结合其他数组方法，例如map()和filter()，以完成更多复杂的操作。这些方法的使用可以大大减少需要编写的代码数量。

在使用reduce()时，请务必注意在累加器函数中使用适当的语法，包括在初始值和累加器之间进行正确的类型转换。

总之，了解和使用Array.reduce()可以极大地提高您的JavaScript编程技能，有效地从您的代码中减少重复和繁琐，并将代码尽可能简单明了。

c语言编程笔录