ES6 reduce方法:示例与详解、应用场景-LMLPHP

ES6 reduce方法:示例与详解、应用场景-LMLPHP


ES6 reduce方法:示例与详解、应用场景-LMLPHP

reduce() 函数是 ECMAScript 6 (ES6) 中数组的一个迭代方法,它接收一个回调函数作为累加器(accumulator),对该数组的所有元素(从左到右)执行操作,最后将计算结果累积为单一输出值。

一、定义与语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  • callback:必需,是一个函数,它接受四个参数:

    • accumulator(累计器):累计回调的返回值,也是上一次调用回调时返回的值,或者是 initialValue
    • currentValue(当前值):数组中当前正在处理的元素。
    • index(可选):当前元素在数组中的索引(从0开始或从initialValue指定的位置开始)。
    • array(可选):调用 reduce 方法的原数组。
  • initialValue(可选):传递给 reduce 的初始值。如果不提供此值,那么 reduce 会从数组的第二个元素开始执行,并使用第一个元素作为 accumulator 的初始值。

二、示例代码:

1. 数组求和:
const numbers = [1, 2, 3, 4, 5];

// 不提供初始值的情况
const sumWithoutInitialValue = numbers.reduce((acc, current) => acc + current);
console.log(sumWithoutInitialValue); // 输出:15

// 提供初始值的情况
const sumWithInitialValue = numbers.reduce((acc, current) => acc + current, 0);
console.log(sumWithInitialValue); // 输出:15
2. 数组扁平化:
const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flattenedArray = nestedArrays.reduce((acc, current) => [...acc, ...current], []);
console.log(flattenedArray); // 输出:[1, 2, 3, 4, 5, 6]
3. 计算对象数组中某个属性的总和:
const products = [
  { id: 1, price: 10 },
  { id: 2, price: 20 },
  { id: 3, price: 30 },
];

const totalPrice = products.reduce((total, product) => total + product.price, 0);
console.log(totalPrice); // 输出:60

三、应用场景

reduce方法是 JavaScript 中的一个高阶函数,以下是一些实际项目中使用reduce方法的场景:

  • 数组求和:对一个数组中的所有元素进行求和。
  • 数组求平均值:对一个数组中的所有元素进行求平均值。
  • 数组元素的去重:对一个数组中的所有元素进行去重。
  • 统计数组中每个元素出现的次数:将结果以对象的形式输出。
  • 根据指定属性对对象数组中的对象进行分组。
  • 结合spread运算符(三点运算符...)一起使用。
  • 遍历数组,同时对符合条件的数组元素进行操作。
  • promise的链式操作,按照顺序执行。
  • 开启由多个函数组成的管道。
  • reduce模拟数组的map函数。
04-02 15:50