Js高阶函数使用之filter()、map()和reduce()

1,898 阅读4分钟

最近本小白在搬砖(敲代码)时,经常碰到需要对数据进行二次处理的场景。因为刚接触前端不久,经验不足,碰到这种场景,第一想法就是自己定义一个函数,里面做一大堆的循环、判断,导致代码可读性差、冗余,以及浪费没必要的时间。所以提醒各位像作者这样刚接触前端的小白们,想要学好js,一定要掌握js为我们提供的各种函数。在这小白为大家介绍三个js常用的高阶函数fileter()、map()和reduce()。

话不多说,直接上代码:

const numbers=[12,54,77,120,20,302] //定义一个数组,里面有一些无序的数字
//接下来相对这个数组的数据进行一些操作
//比如说获取该数组中大于60的数字,并对其乘以2,然后求他们的总和
//啥也不会的我一开始是这样做的
   const moreThan60 = (arr) => {
     let newNums = []
     let total = 0
     let j = 0
     for (let i in arr) {
       if (arr[i] > 60) {
         newNums[j] = arr[i] * 2
         total = total + newNums[j]
         j++
       }
     }
     return total
   }//定义一个函数来实现

   console.log(moreThan60(numbers)) //998

虽然这样能解决问题,看起来也不难,但是如果问题再复杂一点,运用到实际上,我们就不得不在函数内部定义一堆变量、做一堆循环、写一堆代码等,这就会导致我开头说的问题。这时候这几个高阶函数就能派上用场啦。

1.filter()

  • 功能:顾名思义,filter 就是过滤器的意思。它用于把 Array 的某些元素过滤掉,然后返回剩下的元素。
  • 参数:接收一个函数作为其参数。
  • 特点:数组方法,传入的函数必须返回 boolean 值。它能把传入的函数依次作用于每个元素,然后根据返回值是 true 还是 false 决定保留还是丢弃该元素。
  • 用法:以上面的问题为例。上诉问题提到需获取数组中大于60的数字,那不就正好可以使 filter() 嘛,只需要将大于60设定为过滤条件即可。代码如下:
let newNums1 = numbers.filter(n => n > 60)

console.log(newNums1)//[77,120,302]

2.map()

  • 功能:map 有 映射 的意思,也就是这个函数的功能。它用于将 Array 中的所有元素进行一致的改变。
  • 参数:接收一个函数作为其参数。
  • 特点:数组方法。它能把传入的函数依次作用于每个元素,并把结果生成一个新的 Array。
  • 用法:上述问题提到需将新数组乘以2,那使用 map() 再合适不过了。代码如下:
let newNums2 = newNums1.map(n => n * 2)

console.log(newNums2)//[154,240,604]

3.reduce()

  • 功能:它用于把一个函数作用在这个 Array 的每一个元素上,然后把结果继续和序列的下一个元素做累积计算。
  • 参数:接受一个函数作为其参数,该函数要求有两个参数,第一个参数用于保存当前累积计算的值,第二个参数则是当前的数组元素。
  • 特点:数组方法。它可用于对数组的所有元素进行汇总。
  • 用法:我们需要求上述问题所得到数组的总和,即可使用 reduce()。代码如下:
let total = newNums2.reduce((value,n) => value + n)

console.log(total)//998

当我们能灵活运用这三个高阶函数时,上述问题也就变的十分简单,只需一行代码即可解决。代码如下:

let total = numbers.filter(n => n > 60).map(n => n * 2).reduce((value,n) => value + n)
console.log(total)//998

这样不仅方便许多,逻辑也十分清楚,代码既简洁又明了,这就是js函数的伟大之处。

对于 filter() 的补充

filter() 接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示 Array 的某个元素。回调函数还可以接收另外两个参数,分别表示元素的位置和数组本身:

const arr = ['a','b','c']
arr.filter((element,index,arrSelf) => {
 console.log(element)//依次打印a b c 
 console.log(index)//依次打印0 1 2
 console.log(arrSelf)//依次打印['a','b','c']
 return true //返回一个布尔值
})

这样我们就可以利用 filter() 巧妙实现数组去重:

const arr = [1,2,3,1,4,6,2,4,1]
let newArr = arr.filter((el, index, self) => {
  return self.indexOf(el) === index
   })
   console.log(newArr)//[1,2,3,4,6]

以上就是文章的全部内容啦,初入前端,还请各位大佬多多指教!