JS数组Reduce()方法详解及高级技巧-即看即用

2023-12-14 14:43:31

背景:

写这篇文章其实没啥必要,但是看到csdn有很多`小可爱`写了文章设置要VIP`还XX挺多文章都设置`,我寻思这玩意就是看个文章、关键字帮助回忆,所以本着`方便`原则,写了个基础的:

1.reduce() 是 JavaScript 中数组的一个高阶函数,它用于累积数组的元素,将它们合并为一个单一的值。这个方法接受一个回调函数作为参数,这个回调函数可以用来执行对数组中的每个元素的操作,累积的结果会不断传递给下一轮的回调。

下面是关于 reduce() 方法的详解和一些高级技巧:

基本语法:

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

callback: 用于处理数组中每个元素的回调函数。

accumulator: 累积器,累积回调函数的返回值。
currentValue: 数组当前被处理的元素。
currentIndex(可选): 数组当前被处理元素的索引。
array(可选): 调用 reduce 的数组。
initialValue(可选): 作为第一次调用回调函数时的第一个参数的值。如果没有提供,则使用数组的第一个元素作为初始值,并从第二个元素开始调用回调。

基本示例:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出 15

在这个例子中,reduce 从数组 [1, 2, 3, 4, 5] 中累积元素,初始值为 0,每次将当前元素加到累积器上。

高级技巧:

1.不提供初始值:
如果不提供初始值,reduce 会使用数组的第一个元素作为初始值,然后从第二个元素开始执行回调。

const numbers = [1, 2, 3, 4, 5];

const product = numbers.reduce((accumulator, currentValue) => {
  return accumulator * currentValue;
});

console.log(product); // 输出 120

2.使用箭头函数简化:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, val) => acc + val, 0);

console.log(sum); // 输出 15

3.将数组转为对象:

const fruits = ['apple', 'banana', 'orange'];

const fruitObject = fruits.reduce((acc, fruit) => {
  acc[fruit] = true;
  return acc;
}, {});

console.log(fruitObject); // 输出 { apple: true, banana: true, orange: true }

4.Flatten 数组:

const nestedArrays = [[1, 2], [3, 4], [5, 6]];

const flatArray = nestedArrays.reduce((acc, array) => acc.concat(array), []);

console.log(flatArray); // 输出 [1, 2, 3, 4, 5, 6]

5.计算数组中每个元素的出现次数:

const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const wordCount = words.reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {});

console.log(wordCount); // 输出 { apple: 3, banana: 2, orange: 1 }

reduce() 是一个非常强大的数组方法,可以通过不同的应用场景发挥其威力。在使用时,根据具体情况选择是否提供初始值,以及如何编写回调函数。

文章来源:https://blog.csdn.net/Winsom1/article/details/134991845
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。