Skip to content
Go back

Amazing!Reduce 函数这么强大?

Edit page

分享 js 中 reduce 函数的一些灵活用法,用这一个函数就能够实现数组中许多常用方法的功能,带你感受 reduce 的强大之处!

reduce 介绍

reduce 是 JavaScript 数组的一个高阶函数,它用于将数组的每个元素按照指定的方式进行归约(合并)操作。

reduce 接受两个参数:

callback 回调函数接受四个参数:

简单示例

求和:使用 reduce 函数计算数组元素总和

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

console.log(sum); // 输出:15

更多用法

reduce 函数具有很强的灵活性,接下来实现一些常用的数组方法

Array.includes,numbers 中是否存在数值 3

const numbers = [1, 2, 3, 4, 5];
const isExist = numbers.reduce(
  (includes, cur) => (includes ? includes : cur === 3),
  false
);

console.log(isExist); // 输出:true

Array.slice,将 numbers 中索引 0~4 之间的值截取并组成新的数组

const numbers = [1, 2, 3, 4, 5];
const newNums = numbers.reduce(
  (arr, cur, index) => (index > 0 && index < 4 ? [...arr, cur] : arr),
  []
);

console.log(newNums); // 输出:[2, 3, 4]

Array.map,将 numbers 数组中的值都乘以 100

const numbers = [1, 2, 3, 4, 5];
const newNums = numbers.reduce((arr, cur) => [...arr, cur * 100], []);

console.log(newNums); // 输出:[100, 200, 300, 400, 500]

Array.filter,过滤掉 numbers 中小于 3 的数

const numbers = [1, 2, 3, 4, 5];
const newNums = numbers.reduce(
  (arr, cur) => (cur >= 3 ? [...arr, cur] : arr),
  []
);

console.log(newNums); // 输出:[3, 4, 5]

Array.find,找到值为 3 的 item 项

const numbers = [1, 2, 3, 4, 5];
const findItem = numbers.reduce((acc, cur) => {
  if (acc === undefined && cur === 3) {
    return cur;
  }
  return acc;
}, undefined);

console.log(findItem); // 输出:3

Max and Min,获取 numbers 中的最大值和最小值

const numbers = [1, 2, 3, 4, 5];
const maxAndMin = numbers.reduce(
  ({ max, min }, cur) => ({
    max: Math.max(max, cur),
    min: Math.min(min, cur),
  }),
  { max: -Infinity, min: Infinity }
);

console.log(maxAndMin); // 输出:{max: 5, min: 1}

总结

reduce 是处理数组的强大工具,核心思想是 “归约” —— 将数组元素通过某种逻辑合并成一个结果。

虽然说只用这一个函数就能够实现数组中许多常用方法的功能,例如:mapfilterfind 等等,但是本文的目的并不是真的让你去用 reduce 替代这些函数,而是为了让你更深入的了解 reduce 函数!


Edit page
Share this post on:

Previous Post
CSS Anchor Position
Next Post
白嫖!搭建自己的域名邮箱