JavaScript高阶函数filter、map、reduce

/

前言

需求:有这样一个数组[10, 20, 110, 200, 60, 30, 40]
1.筛选出数组中小于100的元素
2.将筛选出的每个元素的值x2
3.完成第2步之后,将数组中的所有元素加起来

普通方法

如果我们还没接触过filtermapreduce,那么就是用for循环

  1. list = [10, 20, 30, 40, 60, 110, 200]
  2. newList = []
  3. newList2 = []
  4. total = 0
  5. // 第1次for循环把小于100的数加入新的数组newList
  6. for (item of list){
  7. if (item<100){
  8. newList.push(item)
  9. }
  10. }
  11. // 第2次for循环把所有的元素值乘以2
  12. for (item of newList){
  13. newValue = item * 2
  14. newList2.push(newValue)
  15. }
  16. // 第3次for循环把数组中的全部元素加起来
  17. for (item of newList2){
  18. total += item
  19. }
  20. console.log(total)

以上写起来非常繁琐,还要定义很多变量,代码阅读起来也不是很好,其实我们有更好的方式,下面介绍

filter

检测数值元素,并返回符合条件所有元素的数组。

定义和用法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

注意
filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

语法

  1. array.filter(function(currentValue,index,arr), thisValue)

参数说明如下:

  • function(currentValue, index, arr):必填函数,数组中的每个元素都会执行这个函数
    • currentValue:必填,当前元素的值
    • index:可选。当前元素的索引值
    • arr:可选。当前元素属于的数组对象
  • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 this 的值。如果省略了 thisValuethis 的值为 undefined

小练习

使用filter函数筛选出[10, 20, 110, 200, 60, 30, 40]小于100的

  1. list = [10, 20, 30, 40, 60, 110, 200]
  2. newList = list.filter(function (n) {
  3. return n < 100
  4. })
  5. console.log(newList)

打印结果

  1. [10, 20, 30, 40, 60]

map

通过指定函数处理数组的每个元素,并返回处理后的数组。

定义和用法

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

注意
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。

语法

  1. array.map(function(currentValue,index,arr), thisValue)

参数说明如下:

  • function(currentValue, index, arr):必填函数,数组中的每个元素都会执行这个函数
    • currentValue:必填,当前元素的值
    • index:可选。当前元素的索引值
    • arr:可选。当前元素属于的数组对象
  • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 this 的值。如果省略了 thisValue,或者传入 nullundefined,那么回调函数的 this 为全局对象。

小练习

将数组[10, 20, 30, 40, 60]中的每个元素值乘以2

  1. list = [10, 20, 30, 40, 60]
  2. newList = list.map(function (n) {
  3. return n * 2
  4. })
  5. console.log(newList)

打印结果

  1. [20, 40, 60, 80, 120]

reduce

将数组元素计算为一个值(从左到右)

定义和用法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose
注意:reduce() 对于空数组是不会执行回调函数的。

语法

  1. array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明如下:

  • function(total,currentValue, index,arr):必填函数,数组中的每个元素都会执行这个函数
    • total:必填。初始值, 或者计算结束后的返回值。
    • currentValue:必填,当前元素的值
    • index:可选。当前元素的索引值
    • arr:可选。当前元素属于的数组对象
  • initialValue:可选。传递给函数的初始值

小练习

计算数组之和[20, 40, 60, 80, 120]

  1. list = [20, 40, 60, 80, 120]
  2. newList = list.reduce(function (total, n) {
  3. return total + n
  4. }, 0)
  5. console.log(newList)

打印结果

  1. 320

使用filter和map和reduce完成案例

上面我们分别介绍了3个高阶函数,接下来结合起来使用

方式1

  1. list = [10, 20, 110, 200, 60, 30, 40]
  2. newList = list.filter(function (n) {
  3. return n < 100
  4. }).map(function (n) {
  5. return n * 2
  6. }).reduce(function (total, n) {
  7. return total + n
  8. })
  9. console.log(newList)

方式2

  1. list = [10, 20, 110, 200, 60, 30, 40]
  2. newList = list.filter(n => n < 100).map(n => n * 2).reduce((total, n) => total+n);
  3. console.log(newList)

以后我们就可以一行代码完成上面的需求,而不需要使用for循环了

Reproduced please indicate the author and the source, and error a link to this page.
text link: //v2ci.com/39.html