分类导航

程序笔记发布时间：2022-07-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了JavaScript（1）高阶函数filter、map、reduce，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

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

普通方法

如果我们还没接触过filter、@H_773_3@map、reduce，那么就是用for循环

<script>
  list = [10, 20, 30, 40, 60, 110, 200]
  newList = []
  newList2 = []
  @R_49_10586@l = 0
  // 第1次for循环把小于100的数加入新的数组newList
  for (item of list){
    if (item<100){
      newList.push(item)
    }
  }
  // 第2次for循环把所有的元素值乘以2
  for (item of newList){
    newValue = item * 2
    newList2.push(newvalue)
  }
  // 第3次for循环把数组中的全部元素加起来
  for (item of newList2){
    @R_49_10586@l += item
  }
  console.log(@R_49_10586@l)
</script>

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

filter

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

定义和用法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素注意 filter() 不会对空数组进行检测。 filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisvalue)

参数说明如下：

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

小练习

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

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

打印结果

[10, 20, 30, 40, 60]

@H_642_0@map

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

定义和用法

@H_773_3@map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 @H_773_3@map() 方法按照原始数组元素顺序依次处理元素。注意注意： @H_773_3@map() 不会对空数组进行检测。注意： @H_773_3@map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisvalue)

参数说明如下：

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

小练习

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

<script>
  list = [10, 20, 30, 40, 60]
  newList = list.map(function (n) {
    return n * 2
  })
  console.log(newList)
</script>

打印结果

[20, 40, 60, 80, 120]

reduce

将数组元素计算为一个值（从左到右）

定义和用法

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

语法

array.reduce(function(@R_49_10586@l, currentValue, currenTindex, arr), initialvalue)

参数说明如下：

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

小练习

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

<script>
  list = [20, 40, 60, 80, 120]
  newList = list.reduce(function (@R_49_10586@l, n) {
    return @R_49_10586@l + n
  }, 0)
  console.log(newList)
</script>

打印结果

使用filter和map和reduce完成案例

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

方式1

<script>
  list = [10, 20, 110, 200, 60, 30, 40]
  newList = list.filter(function (n) {
    return n < 100
  }).map(function (n) {
    return n * 2
  }).reduce(function (@R_49_10586@l, n) {
    return @R_49_10586@l + n
  })
  console.log(newList)
</script>

方式2

<script>
  list = [10, 20, 110, 200, 60, 30, 40]
  newList = list.filter(n => n < 100).map(n => n * 2).reduce((@R_49_10586@l, n) => @R_49_10586@l+n);
  console.log(newList)
</script>

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