携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

前言

作为一个前端开发每天看到 Array 类型的次数比看女朋友的次数都多😂🤣😂🤣。一年的CRUD经历让我自以为对数组的使用已经如火纯青，碰到任何要使用数组处理的问题直接上 forEach、map、filter。直到有一天网上看到实现两个数组过滤的写法，才让我知道这种想法确实只是自以为...

这是啥？

要实现的需求是这样的：若B数组中存在A数组中的值，则将A数组中的对应值过滤

数组A：[1, 2, 3, 5]
数组B：[2, 4, 5, 10, 92]
====>
res: [1, 3]

const deepFilter = (source, arr) => {
  const res = arr.reduce((pre, cur) => {
    return pre.filter((item) => cur !== item)
  }, source)
  return res;
}

？？？（黑人问号），这是什么写法？ reduce 不是用来数组求和的吗？怎么能实现这种需求呢？（这里要感谢菜鸟教程，一个示例直接让我对 reduce 打上标签😂😂）。

一探究竟

是什么？

想搞明白reduce能做什么就想理解她是什么吧。

reduce 和 forEach、map 类似，也是 Array 原型上的一个遍历方法。

reduce 可以接收 两个 参数，

 1、（必填）第一个参数接收一个函数，对数组中的每个元素按序执行该函数，
 每一次运行 `reduce` 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值
 2、可选，初始值，默认取第一个函数传进来的数组中的第一项
 

其中第一个参数 reducer 函数可接收 4 个参数:

1、previousValue 前一次调用 `reducer` 函数的返回值。第一次默认使用数组的第一项：arr[0]，可以通过可选参数指定初始值
2、currentValue 当前处理的数组中的值，这里 `需要注意`: 如果指定了初始值，该项从arr[1]开始取，反之从arr[0]开始取
3、currentIndex 当前值的下标
4、arr 当前在遍历的原数组

了解了这些概念以后再去分析上面的写法，就不难理解了。

怎么用？

const deepFilter = (source, arr) => {
    const res = arr.reduce((pre, cur) => {
        return pre.filter((item) => cur !== item)
      }, source)
    return res;
}

const a = [1, 2, 3, 5];
const b = [2, 4, 5, 10, 92];

const res = deepFilter(a, b);

1、调用 deepFilter，此时 source 是数组a，arr 是数组b 2、使用 reduce 遍历数组b，初始值设置为数组a 3、第一次：传给 reducer 函数的 pre 参数也就是初始值 source（数组a） 4、从 source 中过滤 arr 的第一项 5、后续 pre 的值就是每一次过滤后的新数组 6、遍历。。。

总结来说就是：遍历数组 arr，用数组 source 过滤(filter) arr的每一项，最终得到新数组。

返回值

reduce 方法的返回值是 reducer 函数遍历整个arr数组后得到的结果pre。

总结

以后碰到数组相关的问题别再闭着眼睛上 forEach、map了！！！