JavaScript(1)高阶函数filter、map、reduce「建议收藏」

JavaScript(1)高阶函数filter、map、reduce「建议收藏」前言需求:有这样一个数组[10,20,110,200,60,30,40]1.筛选出数组中小于100的元素2.将筛选出的每个元素的值x23.完成第2步之后,将数组中的所有元素加起来

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

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

普通方法

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

<script>
  list = [10, 20, 30, 40, 60, 110, 200]
  newList = []
  newList2 = []
  total = 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){
    total += item
  }
  console.log(total)
</script>

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

filter

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

定义和用法

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

语法

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的

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

打印结果

[10, 20, 30, 40, 60]

 

map

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

定义和用法

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

语法

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

<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(total, currentValue, currentIndex, arr), initialValue)

参数说明如下:

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

小练习

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

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

打印结果

320

 

使用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 (total, n) {
    return total + 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((total, n) => total+n);
  console.log(newList)
</script>

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165397.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 专题实验 日期类型

    专题实验 日期类型

  • Python – __name__==’__main__’是干啥的,以及python -m与python的区别

    Python – __name__==’__main__’是干啥的,以及python -m与python的区别转自牛人: https://www.cnblogs.com/ddzj01/p/10919210.html1.__name__=='__main__'是干啥的先看例子,准

  • MAC PHP集成环境安装MAMP

    MAC PHP集成环境安装MAMP我在初学PHP的时候先安装了小皮(PHPstudy),但是这个集成开发软件更适合windows,mac版本的也是在最近才出来的,bug很多。然后去安装了Xmsmpformac,但是也是不是很顺利。最终尝试了一下MAMP。虽然要付费,但是真的香,而且可以有14天的免费试用期。足够初学者进行学习。接下来是一个我安装MAMP的一个过程。1、首先去官网进行安装,左上方点击download,以及接下来跟着走就好了。2、这是安装完以后打开的初始界面。3、我们首先可以配置一下apache和my

  • H3C路由器动态NAT配置步骤全解析

    H3C路由器动态NAT配置步骤全解析3C路由器所支持的动态NAT地址转换主要包括:NAPT、NOPAT、EASYIP这三种模式。一般情况下,通过在接口上配置所需关联的ACL和内部全局地址池(当采用EASYIP进行配置时不用配置址池)即可实现动态地址转换,让内部网络用户根据ACL(可选配置)所配置的策略动态选择地址池中可用的IP地址进行转换。但要注意:有些H3C设备还支持仅仅通过判断流出接口报文的源地址,而不使用ACL的方式来实现出接口报文的动态地址转换。

    2022年10月10日
  • 测试用例八大要素有哪些?

    测试用例八大要素有哪些?测试用例八大要素:用例编号、操作步骤、测试标题、重要级别、前置条件、测试输入、所属模块、预期结果。用例编号由字符串组成,具有易于识别性和唯一性;操作步骤需要标明详细的测试步骤;测试标题需要简洁、明了;重要级别一般分为高、中、低;前置条件就是进行测试用例的前提条件;测试输入包括用户名、密码、订单号等内容;所属模块标明被测试的模块或者单元;预期结果表示预期输出的结果。测试用例很重要,是设计和测试过程的基础,同时测试用例也是软件测试的核心,可以发现软件可能出现的bug,一般每个软件产品都有与之对应的测试用

  • pycharm最新激活码【注册码】

    pycharm最新激活码【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号