当前位置:首页 > JavaScript

reduce实现js

2026-04-05 12:42:26JavaScript

使用 reduce 实现数组求和

reduce 可以对数组元素累加求和。初始值设为 0,回调函数将当前值累加到总和:

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

使用 reduce 实现数组扁平化

通过递归处理嵌套数组,reduce 可将多维数组扁平化为一维数组:

reduce实现js

const nestedArray = [1, [2, [3, [4]]]];
const flatten = arr => 
  arr.reduce((flat, item) => 
    flat.concat(Array.isArray(item) ? flatten(item) : item), []);
console.log(flatten(nestedArray)); // 输出: [1, 2, 3, 4]

使用 reduce 实现分组统计

根据对象的属性分组,统计每组数量。示例按年龄分组:

reduce实现js

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 21 },
  { name: 'Charlie', age: 22 }
];
const groupByAge = people.reduce((acc, person) => {
  const key = person.age;
  acc[key] = (acc[key] || 0) + 1;
  return acc;
}, {});
console.log(groupByAge); // 输出: {21: 2, 22: 1}

使用 reduce 实现数组去重

通过检查元素是否已存在于累加器中,实现数组去重:

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

使用 reduce 实现对象属性转换

将对象数组转换为以 id 为键的新对象:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
const usersById = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});
console.log(usersById); 
// 输出: {1: {id: 1, name: 'Alice'}, 2: {id: 2, name: 'Bob'}}

注意事项

  • 始终指定 reduce 的初始值,避免空数组导致错误。
  • 复杂操作时,确保回调函数纯函数化,避免副作用。
  • 性能敏感场景需测试 reduce 与其他方法(如循环)的差异。

标签: reducejs
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数:…