当前位置:首页 > JavaScript

js reduce实现

2026-02-02 10:33:04JavaScript

使用 reduce 实现数组求和

reduce 可以用于计算数组元素的总和。通过累加器(acc)逐步叠加当前值(curr):

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出 10

使用 reduce 实现数组去重

通过检查累加器中是否已存在当前值,实现数组去重:

const duplicates = [1, 2, 2, 3, 4, 4];
const unique = duplicates.reduce((acc, curr) => 
  acc.includes(curr) ? acc : [...acc, curr], []
);
console.log(unique); // 输出 [1, 2, 3, 4]

使用 reduce 实现对象属性分组

根据对象的某个属性值进行分组,生成一个以属性值为键的对象:

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 21 },
  { name: 'Charlie', age: 22 }
];
const groupedByAge = people.reduce((acc, person) => {
  const key = person.age;
  if (!acc[key]) acc[key] = [];
  acc[key].push(person);
  return acc;
}, {});
console.log(groupedByAge); 
// 输出 { 21: [{...}, {...}], 22: [{...}] }

使用 reduce 实现扁平化二维数组

将二维数组转换为一维数组:

const nested = [[1, 2], [3, 4], [5, 6]];
const flat = nested.reduce((acc, curr) => acc.concat(curr), []);
console.log(flat); // 输出 [1, 2, 3, 4, 5, 6]

使用 reduce 实现统计字符出现次数

统计字符串中每个字符的出现次数:

const str = 'hello';
const charCount = str.split('').reduce((acc, char) => {
  acc[char] = (acc[char] || 0) + 1;
  return acc;
}, {});
console.log(charCount); // 输出 { h: 1, e: 1, l: 2, o: 1 }

注意事项

  • 初始值(第二个参数)可选,但未提供时需确保数组非空,否则会抛出错误。
  • 累加器(acc)可以是任意类型(数组、对象、数字等),需根据场景选择。
  • 避免在 reduce 中直接修改原数组或累加器引用,保持纯函数特性。

js reduce实现

标签: jsreduce
分享给朋友:

相关文章

js 实现vue

js 实现vue

实现 Vue 的核心功能 在 JavaScript 中实现 Vue 的核心功能需要模拟数据绑定、虚拟 DOM 和响应式系统。以下是一个简化版的实现思路: 响应式系统 通过 Object.define…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获取…

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回…

js实现二叉树

js实现二叉树

二叉树的基本概念 二叉树是一种树形数据结构,每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的常见操作包括插入、删除、遍历等。 二叉树的节点定义 在JavaScript中,二叉树的节点可…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…