【前端面经】JS-数组方法reduce

在JavaScript中，reduce()是一个数组方法，它可以将数组的所有元素“缩减”为一个单独的值。本文将介绍reduce()的概念、使用方法和常见场景。

什么是reduce?

reduce()是一个高阶函数，它将一个回调函数作为参数，该回调函数接受四个参数：previousValue（上一个元素的值）、currentValue（当前元素的值）、currentIndex（当前元素的索引）和array（该数组）。

reduce()方法通过对数组中的每个元素应用回调函数来“累积”单个值。该累积值在每次调用回调函数时更新，并在最后一次调用后返回。

下面是一个简单的例子：

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

在上面的例子中，我们从数组中获得了一个总和。reduce()方法将数组中的每个元素添加到previousValue中，并将其返回作为下一次调用的previousValue，直到所有元素都被遍历并计算出总和。

如何使用reduce?

reduce()方法具有以下语法：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

其中：

• callback：回调函数，执行数组中每个值（如果没有提供initialValue则从索引1开始）。
• accumulator：累加器，累加器累加回调函数的返回值。它是reduce()方法的返回值。
• currentValue：当前元素的值。
• index（可选）：当前元素的索引。
• array（可选）：被遍历的数组。
• initialValue（可选）：作为第一次调用callback函数时的第一个参数的值。如果未提供，则使用数组的第一个元素作为初始值。

以下是一个计算数组中所有元素的平均值的例子：

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

在上面的例子中，我们使用reduce()方法计算了数组的平均值。回调函数在每次迭代时将元素添加到previousValue中，并在最后一次迭代时计算平均值并返回。

reduce()方法可以应用于许多场景，例如：

• 计算数组中所有元素的总和、平均值或最大/最小值。

以下是一个计算数组中所有元素的总和的例子：

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

在上面的例子中，我们从数组中获得了一个总和。reduce()方法将数组中的每个元素添加到previousValue中，并将其返回作为下一次调用的previousValue，直到所有元素都被遍历并计算出总和。

• 将二维数组转换为一维数组。

以下是一个将二维数组转换为一维数组的例子：

const arrays = [[1, 2], [3, 4], [5, 6]];
const flattened = arrays.reduce((previousValue, currentValue) => {
  return previousValue.concat(currentValue);
}, []);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

在上面的例子中，我们使用reduce()方法将二维数组转换为一维数组。回调函数将每个数组拼接到previousValue中，并将其返回作为下一次调用的previousValue，直到所有元素都被遍历并拼接到一起。

• 从对象数组中提取指定属性的值。

以下是一个从对象数组中提取指定属性的值的例子：

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const ages = people.reduce((previousValue, currentValue) => {
  return previousValue.concat(currentValue.age);
}, []);
console.log(ages); // [25, 30, 35]

在上面的例子中，我们使用reduce()方法从people数组中提取了age属性，并将它们作为单独的数组返回。

• 数组去重。

以下是一个数组去重的例子：

const numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const unique = numbers.reduce((previousValue, currentValue) => {
  if (!previousValue.includes(currentValue)) {
    previousValue.push(currentValue);
  }
  return previousValue;
}, []);
console.log(unique); // [1, 2, 3, 4]

在上面的例子中，我们使用reduce()方法将重复的元素从数组中删除，并将结果作为单独的数组返回。

总之，reduce()是一个非常有用的方法，可以帮助我们减少代码量并提高效率。