标题说明了一切🐐。我想谈谈我最喜欢的 javascript 数组方法:Array.reduce()。我知道有很多竞争者,但请听我说完。reduce() 不仅仅是一种方法;它是一种生活方式✨。
不过说实话,当我第一次开始使用 Reduce 时,我感到有点害怕。我花了一段时间才自信地在我的代码中使用它。但当我这样做时,它改变了一切。突然间,我可以轻松地对数组执行复杂的操作,将它们转换为我需要的任何东西。我的代码变得更快、更干净。
但不要只听我说。让我向你展示一下你可以用 reduce() 实现的一些功能。现在是时候深入研究 Array.reduce() 并发现它为什么如此受欢迎了!🐐
Array.reduce() 的 9 个用例🐐
用例 1:求和
Reduce() 最直接的用例之一是对一组数字求和。假设您有一个整数数组,并且想要计算总和。
const numbers: number[] = [1, 2, 3, 4, 5];
const sum: number = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15
轰!仅用一行代码,您就计算出了数组中所有元素的总和。累加器的初始值设置为 0,并且在每次迭代中,我们将当前元素添加到累加器中。
** 额外好处:如果您选择忽略起始值,reduce 将只使用数组中的第一个项。不过我倾向于始终包含一个初始值,这样更易于阅读。
用例 2:展平数组
您是否曾经发现自己拥有一个数组并想过,“我希望可以将它们展平为一个数组”?
const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]];
const flattenedArray: number[] = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]
在此示例中,我们以空数组作为初始累加器值。然后,在每次迭代中,我们使用 concat() 方法将当前子数组连接到累加器。最后,我们得到了一个完美的扁平数组。
我知道你也可以用 来做这件事Array.flat()
。但是,知道如何使用 reduce 很重要,以防你想对每个项目执行额外的操作。
用例 3:分组对象
假设您有一个对象数组,并且想要根据特定属性对它们进行分组。reduce() 是完成这项工作的完美工具。
interface Person {
name: string;
age: number;
}
const people: Person[] = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 },
{ name: 'Dave', age: 30 }
];
const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => {
if (!acc[curr.age]) {
acc[curr.age] = [];
}
acc[curr.age].push(curr);
return acc;
}, {});
console.log(groupedByAge);
/*
Output:
{
'25': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }],
'30': [{ name: 'Bob', age: 30 }, { name: 'Dave', age: 30 }]
}
*/
在这种情况下,我们使用一个对象作为初始累加器值。我们检查累加器是否已经具有当前年龄的属性。如果没有,我们为该年龄创建一个空数组。然后,我们将当前对象推送到相应的年龄数组中。最后,我们得到一个对象,其中的键是年龄,值是具有该年龄的人的数组。
现在您也可以了解较新的groupBy
方法,但是,了解这个久经考验的经典方法很重要。
用例 4:创建查找图
我个人最喜欢的是使用 reduce() 从数组创建查找图。在性能和代码可读性方面,这会带来翻天覆地的变化。停止使用那些缓慢的 find() 或 filter() 调用。
interface Product {
id: number;
name: string;
price: number;
}
const products: Product[] = [
{ id: 1, name: 'Laptop', price: 999 },
{ id: 2, name: 'Phone', price: 699 },
{ id: 3, name: 'Tablet', price: 499 },
];
const productMap: { [key: number]: Product } = products.reduce((acc, curr) => {
acc[curr.id] = curr;
return acc;
}, {});
console.log(productMap);
/*
Output:
{
'1': { id: 1, name: 'Laptop', price: 999 },
'2': { id: 2, name: 'Phone', price: 699 },
'3': { id: 3, name: 'Tablet', price: 499 }
}
*/
// Accessing a product by ID
const laptop: Product = productMap[1];
console.log(laptop); // Output: { id: 1, name: 'Laptop', price: 999 }
通过使用 reduce() 创建查找映射,您可以以恒定时间复杂度通过唯一标识符访问元素。无需再循环遍历数组来查找特定项目。
用例 5:计数发生次数
是否曾经需要计算数组中元素的出现次数?reduce() 可以帮你搞定。
const fruits: string[] = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCounts: { [key: string]: number } = fruits.reduce((acc, curr) => {
acc[curr] = (acc[curr] || 0) + 1;
return acc;
}, {});
console.log(fruitCounts);
/*
Output:
{
'apple': 3,
'banana': 2,
'orange': 1
}
*/
在此示例中,我们将一个空对象初始化为累加器。对于数组中的每个水果,我们检查它是否已作为累加器对象中的属性存在。如果存在,则将其计数增加 1;否则,将其初始化为 1。结果是一个对象,它告诉我们每个水果在数组中出现了多少次。
用例 6:组合函数
函数式编程爱好者会喜欢这个。reduce() 是一个强大的函数组合工具。你可以使用它来创建一个函数管道,逐步转换数据。
const add5 = (x: number): number => x + 5;
const multiply3 = (x: number): number => x * 3;
const subtract2 = (x: number): number => x - 2;
const composedFunctions: ((x: number) => number)[] = [add5, multiply3, subtract2];
const result: number = composedFunctions.reduce((acc, curr) => curr(acc), 10);
console.log(result); // Output: 43
在此示例中,我们有一个函数数组,我们希望按顺序应用这些函数,初始值为 10。我们使用 reduce() 迭代这些函数,将每个函数的结果作为下一个函数的输入。最终结果是按组合顺序应用所有函数的结果。
用例 7:实现简单的类似 Redux 的状态管理
如果您使用过 Redux,那么您就会知道它在管理应用程序中的状态方面有多么强大。猜猜怎么着?您可以使用 reduce() 来实现一个简单的类似 Redux 的状态管理系统。
interface State {
count: number;
todos: string[];
}
interface Action {
type: string;
payload?: any;
}
const initialState: State = {
count: 0,
todos: [],
};
const actions: Action[] = [
{ type: 'INCREMENT_COUNT' },
{ type: 'ADD_TODO', payload: 'Learn Array.reduce()' },
{ type: 'INCREMENT_COUNT' },
{ type: 'ADD_TODO', payload: 'Master TypeScript' },
];
const reducer = (state: State, action: Action): State => {
switch (action.type) {
case 'INCREMENT_COUNT':
return { ...state, count: state.count + 1 };
case 'ADD_TODO':
return { ...state, todos: [...state.todos, action.payload] };
default:
return state;
}
};
const finalState: State = actions.reduce(reducer, initialState);
console.log(finalState);
/*
Output:
{
count: 2,
todos: ['Learn Array.reduce()', 'Master TypeScript']
}
*/
在此示例中,我们有一个初始状态对象和一个操作数组。我们定义一个 Reducer 函数,该函数接受当前状态和一个操作,并根据操作类型返回一个新状态。通过使用 Reduce(),我们可以按顺序将每个操作应用于状态,从而得到最终状态。这就像拥有一个迷你版 Redux。
用例 8:生成唯一值
有时,您可能有一个包含重复值的数组,并且您只需要提取唯一的值。reduce() 可以帮助您轻松完成此操作。
const numbers: number[] = [1, 2, 3, 2, 4, 3, 5, 1, 6];
const uniqueNumbers: number[] = numbers.reduce((acc, curr) => {
if (!acc.includes(curr)) {
acc.push(curr);
}
return acc;
}, []);
console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6]
在这里,我们初始化一个空数组作为累加器。对于原始数组中的每个数字,我们使用 includes() 方法检查它是否已存在于累加器中。如果不存在,我们将它推送到累加器数组中。最终结果是一个仅包含原始数组中唯一值的数组。
用例 9:计算平均值
想要计算一组数字的平均值?reduce() 可以帮你实现!
const grades: number[] = [85, 90, 92, 88, 95];
const average: number = grades.reduce((acc, curr, index, array) => {
acc += curr;
if (index === array.length - 1) {
return acc / array.length;
}
return acc;
}, 0);
console.log(average); // Output: 90
在这个例子中,我们将累加器初始化为 0。我们迭代每个成绩并将其添加到累加器中。当我们到达最后一个元素时(使用索引和 array.length 检查),我们将累加器除以总成绩数以计算平均值。
性能注意事项
虽然 Array.reduce() 非常强大且用途广泛,但必须注意潜在的性能缺陷,尤其是在处理大型数组或复杂操作时。一个常见的陷阱是在 reduce() 的每次迭代中创建新的对象或数组,这可能导致过多的内存分配并影响性能。
例如,考虑以下代码:
const numbers: number[] = [1, 2, 3, 4, 5];
const doubledNumbers: number[] = numbers.reduce((acc, curr) => {
return [...acc, curr * 2];
}, []);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
在这种情况下,我们使用扩展运算符 (...) 在每次迭代中创建一个新数组,这可能效率低下。相反,我们可以通过直接改变累加器数组来优化代码:
const numbers: number[] = [1, 2, 3, 4, 5];
const doubledNumbers: number[] = numbers.reduce((acc, curr) => {
acc.push(curr * 2);
return acc;
}, []);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
通过使用 push() 改变累加器数组,我们避免在每次迭代中创建新数组,从而提高性能。
类似地,当使用对象时,直接改变累加器对象比使用扩展运算符创建新对象更有效:
const people: Person[] = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 25 },
{ name: 'Dave', age: 30 }
];
const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => {
if (!acc[curr.age]) {
acc[curr.age] = [];
}
acc[curr.age].push(curr);
return acc;
}, {});
通过直接改变累加器对象,我们优化了reduce()操作的性能。
但是,值得注意的是,在某些情况下,在每次迭代中创建新的对象或数组可能是必要的或更具可读性。根据具体用例和所处理数据的大小,在性能和代码清晰度之间取得平衡非常重要。
结论
就是这样。九个令人难以置信的用例展示了 Array.reduce() 的强大功能和多功能性。从求和数字到展平数组、分组对象到创建查找图、计数出现次数到组合函数,甚至实现状态管理和计算平均值,都Array.reduce()
证明它是您的 js 工具包中的一个强大工具。