JavaScript ES6数组方法filter与reduce详解

作者：纸飞机

时间：2026-10-25

本文详细介绍JavaScript ES6新增的filter与reduce数组方法。filter用于筛选符合条件的元素并返回新数组，不修改原数据；reduce通过回调函数累积计算结果，支持求和、去重及复杂数据处理。掌握这两个高阶函数能显著提升代码简洁性与开发效率。

文章目录

前言

在ES6标准引入的新数组方法中，提供了多种遍历操作接口，其中筛选功能的filter和归并处理的reduce尤为常用。

filter

filter方法的核心作用是对数组进行条件筛选。调用该方法时，原始数组保持不变，系统会遍历每个元素，将满足指定条件的元素提取出来，组成一个新数组并返回。

/***
   * @item 数组元素
   * @index 遍历数组下标
   * @thisArr 当前数组
   */
let arr1 = [1, 2, 3, 4, 5];
  let newArr1 = arr1.filter((item, index, thisArr) => {
    console.log(item);
    console.log(index);
    console.log(thisArr);
    return item > 2;
  })
  console.log(arr1);
  console.log(newArr1);`

执行上述代码后，可以观察到原数组arr1的内容未发生任何改变，而变量newArr1则接收了所有符合筛选条件的元素集合。

// [1, 2, 3, 4, 5]  arr1
// [3, 4, 5]    newArr1

reduce

与map和filter等常规遍历方法不同，reduce方法的语法结构相对独特，它主要用于将数组值累积为一个单一的输出值。

其基本语法格式如下：

array.reduce(function(total,currentValue,currentIndex,thisArr){},initValue);
@function回调函数作为第一个参数，

total参数用于接收累加结果或作为初始值返回。
currentValue表示当前正在遍历处理的数组元素。
currentIndex代表当前元素的索引下标。
thisArr指代当前正在执行操作的源数组对象。
initValue是可选参数，用于指定传递给回调函数的初始累加值。

数组求和

// 数组求和
let arr1 = [1, 2, 3, 4, 5]
let totals = arr1.reduce(function (prev, next) {
    console.log(prev);
    console.log(next);
    return prev + next;
}, 0)
console.log(totals)

筛选首字母是否包含b字母

let arr = ['beep', 'boop', 'foo', 'bar'];
console.log(arr.reduce((acc, val) => (val[0] === 'b' && acc.push(val), acc), []));

// 进阶每个数是否含有'b'
arr.reduce((acc, val) =>
           (val.indexOf('b') >-1 && acc.push(val), acc),
           [])

除了基础的数组求和功能外，reduce方法还可以用于实现数组去重、查找最大值或最小值等复杂操作。

此外，由于reduce的高阶函数特性，它可以被封装并供其他函数调用，从而构建更灵活的数据处理逻辑。