当前位置:首页 > JavaScript

js reduce实现

2026-03-15 10:34:50JavaScript

使用 reduce 实现数组求和

reduce 方法通过遍历数组,将元素累积为单个值。以下是一个简单的数组求和示例:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 10
  • accumulator:累积值,初始值为 0(第二个参数)。
  • currentValue:当前处理的数组元素。

使用 reduce 实现数组扁平化

通过 reduce 可以将多维数组扁平化为一维数组:

js reduce实现

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattened = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattened); // 输出: [1, 2, 3, 4, 5, 6]
  • 初始值为空数组 []
  • concat 方法将当前数组与累积数组合并。

使用 reduce 统计元素出现次数

reduce 可以统计数组中各元素的出现次数:

js reduce实现

const 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 实现管道函数

通过 reduce 可以将多个函数组合成一个管道:

const double = x => x * 2;
const square = x => x * x;
const functions = [double, square];

const result = functions.reduce((acc, fn) => fn(acc), 5);
console.log(result); // 输出: 100 (5 → 10 → 100)
  • 初始值为 5
  • 依次应用 doublesquare 函数。

使用 reduce 实现对象转换

reduce 可以将数组转换为特定结构的对象:

const people = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const peopleById = people.reduce((acc, person) => {
  acc[person.id] = person;
  return acc;
}, {});

console.log(peopleById);
// 输出: { 1: { id: 1, name: 'Alice' }, 2: { id: 2, name: 'Bob' }, 3: { id: 3, name: 'Charlie' } }
  • 初始值为空对象 {}
  • 将数组元素以 id 为键存入对象。

标签: jsreduce
分享给朋友:

相关文章

js实现

js实现

实现 JavaScript 功能的方法 在 JavaScript 中实现特定功能通常涉及多个步骤。以下是常见的实现方法: 基础语法和变量声明 使用 let 或 const 声明变量: let co…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…