[JS实战]一文掌握数组reduce的十大高级用法，让你的代码更优雅！

# [JS实战]一文掌握数组reduce的十大高级用法，让你的代码更优雅！## 理解reduce基础概念reduce是JavaScript数组方法中功能最强大的方法之一，它允许您通过遍历数组元素并将它们减少为单个值来处理数组。该方法接收一个回调函数和一个初始值作为参数。## 计算数组元素总和```javascriptconst numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(sum); // 输出: 15```这是reduce最常用的场景，通过累加器将数组中的所有元素相加，得到总和。## 展平多维数组```javascriptconst nestedArray = [[1, 2], [3, 4], [5, 6]];const flatArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]```使用reduce可以轻松地将多维数组转换为一维数组，比flat()方法在复杂场景下更具灵活性。## 统计元素出现次数```javascriptconst fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];const count = fruits.reduce((acc, fruit) => { acc[fruit] = (acc[fruit] || 0) + 1; return acc;}, {});console.log(count); // 输出: {apple: 3, banana: 2, orange: 1}```利用reduce可以高效地统计数组中各元素的出现频率，生成一个频率统计对象。## 按属性分组对象数组```javascriptconst people = [ { name: 'Alice', age: 21 }, { name: 'Bob', age: 21 }, { name: 'Charlie', age: 22 }];const groupedByAge = people.reduce((acc, person) => { const age = person.age; if (!acc[age]) acc[age] = []; acc[age].push(person); return acc;}, {});console.log(groupedByAge);```这种方法可以轻松实现对对象数组按照某个属性进行分组，非常适用于数据处理场景。## 数组去重```javascriptconst numbers = [1, 2, 2, 3, 4, 4, 5];const uniqueNumbers = numbers.reduce((acc, current) => { if (!acc.includes(current)) { acc.push(current); } return acc;}, []);console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]```使用reduce可以实现数组去重，虽然Set数据结构更简单，但reduce在处理复杂去重逻辑时更有优势。## 链式调用替代方案```javascriptconst operations = [ (x) => x + 1, (x) => x 2, (x) => x - 3];const result = operations.reduce((acc, fn) => fn(acc), 5);console.log(result); // 输出: ((5+1)2)-3 = 9```reduce可以用于实现函数链式调用，这在函数式编程中非常有用。## 异步操作顺序执行```javascriptconst asyncTasks = [ () => new Promise(resolve => setTimeout(() => resolve(1), 1000)), (prev) => new Promise(resolve => setTimeout(() => resolve(prev + 2), 1000)), (prev) => new Promise(resolve => setTimeout(() => resolve(prev 3), 1000))];asyncTasks.reduce(async (prevPromise, task) => { const result = await prevPromise; return task(result);}, Promise.resolve(0)).then(console.log); // 输出: 9```利用reduce和async/await，可以实现异步操作的顺序执行，这在处理依赖前一个结果的异步任务时非常有用。## 对象属性转换```javascriptconst keyValuePairs = [['name', 'John'], ['age', 30], ['city', 'New York']];const obj = keyValuePairs.reduce((acc, [key, value]) => { acc[key] = value; return acc;}, {});console.log(obj); // 输出: {name: John, age: 30, city: New York}```将键值对数组转换为对象是reduce的另一个常见用途，代码简洁且易读。## 函数组合```javascriptconst compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);const add5 = x => x + 5;const multiply2 = x => x 2;const subtract3 = x => x - 3;const composedFunction = compose(subtract3, multiply2, add5);console.log(composedFunction(5)); // 输出: ((5+5)2)-3 = 17```通过reduceRight实现函数组合，这是一种强大的函数式编程技术。## 条件累加```javascriptconst numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const sumOfEvens = numbers.reduce((acc, num) => { if (num % 2 === 0) { return acc + num; } return acc;}, 0);console.log(sumOfEvens); // 输出: 30```使用reduce可以在累加过程中添加条件判断，实现更复杂的累加逻辑。