reduce()方法的应用

不爱吃糖的程序媛

发布于 2024-03-16 08:59:52

1160

发布于 2024-03-16 08:59:52

reduce() 是 JavaScript 数组（Array）对象的一个方法，它接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

reduce() 方法的基本语法如下：

array.reduce(function(accumulator, currentValue, currentIndex, array) {  
    // 返回累加器积累的结果  
}, initialValue);

参数说明：

function(accumulator, currentValue, currentIndex, array): 执行数组中每个元素调用的函数，它包含四个参数。 accumulator（必需）：累积器，累积回调函数的返回值；它是上一次调用回调时返回的累积值，或者是initialValue（如果提供了的话）。 currentValue（必需）：数组中正在处理的当前元素。 currentIndex（可选）：数组中正在处理的当前元素的索引。如果提供了initialValue，则索引为0，否则从索引1起始。 array（可选）：调用reduce()的数组。 initialValue（可选）：作为第一次调用callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce将报错。 reduce() 方法非常适合将数组元素组合成单个输出值，比如求和、求积或者将数组对象合并为单一对象。

以下是一些使用 reduce() 方法的例子：

求和

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

数组元素去重：

const array = [1, 2, 2, 3, 4, 4, 5];  
const uniqueArray = array.reduce((accumulator, currentValue) => {  
  if (!accumulator.includes(currentValue)) {  
    accumulator.push(currentValue);  
  }  
  return accumulator;  
}, []);  
console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

将多维数组转换为一维数组：

const nestedArray = [1, [2, 3], [4, [5, 6]]];  
const flattenedArray = nestedArray.reduce((accumulator, currentValue) => {  
  return accumulator.concat(Array.isArray(currentValue) ? currentValue.reduce((a, b) => a.concat(b), []) : accumulator.concat(currentValue));  
}, []);  
console.log(flattenedArray); // 输出 [1, 2, 3, 4, 5, 6]

计算数组中每个元素出现的次数：

const votes = ["vue", "react", "angular", "vue", "react", "angular", "vue", "react", "vue"];  
const count = votes.reduce((accumulator, currentValue) => {  
  if (!accumulator[currentValue]) {  
    accumulator[currentValue] = 1;  
  } else {  
    accumulator[currentValue]++;  
  }  
  return accumulator;  
}, {});  
console.log(count); // 输出 { vue: 4, react: 3, angular: 2 }

对象属性的累加：

const items = [  
  { name: 'item1', price: 10 },  
  { name: 'item2', price: 20 },  
  { name: 'item3', price: 30 }  
];  
const totalPrice = items.reduce((accumulator, currentValue) => accumulator + currentValue.price, 0);  
console.log(totalPrice); // 输出 60

字符串连接：

虽然这可以用 join() 方法更简单地完成，但 reduce() 也可以用来连接数组中的字符串元素。

const words = ['Hello', 'world', '!'];  
const sentence = words.reduce((accumulator, currentValue) => accumulator + ' ' + currentValue);  
console.log(sentence); // 输出 "Hello world !"

这些只是 reduce() 方法的一些应用场景示例。实际上，由于 reduce() 的灵活性，它可以用于任何需要累积或缩减数组元素的场景。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

数组