JavaScript中常用的高阶函数
admin
2024-03-23 18:06:16
0

作业需求
定义一个数组,里面放入一些数字,有下列需求:

  • 需求1:取出所有小于100的数字
  • 需求2:将所有小于100的数字进行转化:全部*2
  • 需求3:将new2Nums中所有的数字相加,得到最终的结果

实现过程1–>最基本方法

<1>定义一个数组

const nums = [10,20,111,222,333,40,60,50]

1.需求1:取出所有小于100的数字

let newNums = []
for(let n of nums) {if(n<100) {newNums.push(n)}
}
console.log(newNums);

2.需求2:将所有小于100的数字进行转化:全部*2

let new2Nums = []
for(let n of newNums) {new2Nums.push(n*2)
}
console.log(new2Nums);

3.需求3:将new2Nums中所有的数字相加,得到最终的结果

let total = 0
for(let n of new2Nums) {total += n
}
console.log(total);

实现过程2–>JavaScript高阶函数实现

1.需求1:取出所有小于100的数字

过滤函数filter函数的使用

let newNums = nums.filter(function(n) {return n < 100;
})

函数讲解

  • filter中的回调函数有一个要求:必须返回一个boolean值
  • true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
  • false:当返回为false时,函数内部会过滤掉这次的n
  • 回调函数,每次遍历数组
  • (n<100):是一个boolean类型,true会正常保存

2.需求2:将所有小于100的数字进行转化:全部*2

map函数的使用

let new2Nums = newNums.map(function(n) {return n*2;
})
console.log(new2Nums);

函数讲解

  • 可以对数组中的所有函数进行遍历

3.需求3:将new2Nums中所有的数字相加,得到最终的结果

reduce函数的使用

let new3Nums = new2Nums.reduce(function(preValue ,n) {return preValue+n;
},0)
console.log(new3Nums);

函数讲解

  • 对数组中所有的值进行汇总
  • 第二个参数0,默认的preValue的值为0

实现过程3–>JavaScript高阶函数高级实现1

let total = nums.filter(function(n) {return n<100
}).map(function(n) {return n*2
}).reduce(function(preValue,n) {return preValue+n
},0)
console.log(total);

实现过程4–>JavaScript高阶函数高级实现2

let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) =>pre+n);
console.log(total);

笔记完整代码

//编程范式:命令式编程 声明式遍历
//编程范式:面向对象编程(谁是第一公民:对象) 函数式编程(谁是第一公民:函数)
//高阶函数:filter/map/reduce
const nums = [10,20,111,222,333,40,60,50]
//高级写法1
let total = nums.filter(function(n) {return n<100
}).map(function(n) {return n*2
}).reduce(function(preValue,n) {return preValue+n
},0)
console.log(total);
//高级写法2
let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) =>pre+n);
console.log(total);//1.过滤函数filter函数的使用
// filter中的回调函数有一个要求:必须返回一个boolean值
//true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
//false:当返回为false时,函数内部会过滤掉这次的n
let newNums = nums.filter(function(n) {//回调函数,每次遍历数组return n < 100;//(n<100):是一个boolean类型,true会正常保存
})
console.log(newNums)
//2.map函数的使用:可以对数组中的所有函数进行遍历
let new2Nums = newNums.map(function(n) {return n*2;
})
console.log(new2Nums);
//3.reduce函数的使用:对数组中所有的值进行汇总
let new3Nums = new2Nums.reduce(function(preValue ,n) {return preValue+n;
},0)
//第二个参数0,默认的preValue的值为0
console.log(new3Nums);
//1.需求1:取出所有小于100的数字
let newNums = []
for(let n of nums) {if(n<100) {newNums.push(n)}
}
console.log(newNums);
//2.需求2:将所有小于100的数字进行转化:全部*2
let new2Nums = []
for(let n of newNums) {new2Nums.push(n*2)
}
console.log(new2Nums);
//3.需求3:将new2Nums中所有的数字相加,得到最终的结果
let total = 0
for(let n of new2Nums) {total += n
}
console.log(total);

相关内容

热门资讯

大疆状告美国FCC 文︱陆弃 大疆创新将美国联邦通信委员会(FCC)推上法庭,这不仅是一场企业与监管机关间的程序对抗,更...
新春坚守“医”线 守护万家安康 2026年新春佳节 万家灯火,阖家团圆 年味在氤氲的烟火气中弥漫 祈愿融进暖意融融的叙谈里 而同一时...
AMD与Nutanix建立战略... IT之家 2 月 26 日消息,AMD 与超融合企业 Nutanix 当地时间 25 日共同宣布,双...
深圳传音控股股份有限公司 20... 本公司董事会及全体董事保证本公告内容不存在任何虚假记载、误导性陈述或者重大遗漏,并对其内容的真实性、...
银行“开抢”压岁钱 春节过后,孩子们的红包往哪存?近日,多家银行推出儿童专属存款产品,利率略高于普通存款利率,起存门槛也...
工行官宣,宋建华离任 【导读】工商银行高级业务总监宋建华因年龄原因离任 中国基金报记者 嘉合 2月25日,工商银行发布公告...
打造新场景新业态 政策加码挖潜... 来源:滚动播报 (来源:经济参考报) 2月24日召开的国务院常务会议研究推进银发经济和养老服务发展有...
从年味里看春节消费新图景 从年味里看春节消费新图景 2月20日,游客在位于天津的国家海洋博物馆“未来海洋”展厅参观。 春...
原创 羽... 文丨郭小兴 编辑丨百进 来源丨新商悟 (本文约为1200字) 在消费电子行业增速放缓的关口,一家企业...
欧洲能否向乌克兰派兵?“得等普... 【文/观察者网 陈思佳】当地时间2月24日,俄乌冲突四周年之际,乌克兰总统泽连斯基在基辅欢迎了欧洲多...
1月泰国大米出口同比下降17.... 来源:中国新闻网 中新社曼谷2月25日电(李映民 刘宇博)泰国大米出口商协会主席查伦25日表示,20...
金价银价,双双大涨 大河财立方消息,2月23日,受美国关税政策的不确定性及避险情绪影响推动,国际金价银价开盘再度双双走高...
春天养肝正当时,记住这三点,一... 这两天出门,大伙儿有没有发现?风变软了,不似冬天那般刺骨,路边的树枝也悄悄冒了嫩芽,地气一点点往上走...
【网络股指数ETF收涨约2.3... 【网络股指数ETF收涨约2.3%,领跑美股行业ETF】周三(2月25日),网络股指数ETF收涨2.2...
“哑铃型”结构显现 白酒市场如... 来源:滚动播报 (来源:北京商报) 随着春节假期结束,白酒市场逐渐步入消费淡季。今年春节假期,白酒市...
AI产业链方向低位震荡,人工智... 2月25日,AI产业链方向低位震荡,光通信、AIGC、AI算力等板块承压。截至收盘,中证人工智能主题...
大疆起诉美监管,数据看清资金连... 近期国产无人机龙头大疆正式起诉美国联邦通信委员会,挑战其将产品列入“受管制清单”的决定。消息一出,不...
欧盟终结小额免税政策!7月1日... 近日,欧盟最新跨境电商进口监管改革方案正式生效,核心变革在于废除长期实施的“价值低于150欧元小包裹...
个税年度汇算,今起预约! 据国家税务总局通告,2025年度个人所得税综合所得汇算清缴办理时间为2026年3月1日至6月30日。...
智洋创新终止收购灵明光子控股权... 2月25日晚间,智洋创新(SH688191,停牌)发布公告,宣布终止筹划以发行股份、可转债或现金等方...