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);

相关内容

热门资讯

贷款也“拼团” 银行抢单忙 购物能“拼团”,贷款也能! 近日,一场“拼团融资”的银企对接活动在省工业和信息化厅拉开帷幕。 “贷款...
逛花展、赶市集、嗨直播!202... 5月23日 “2026北京直播电商购物月” 在丰台区丽泽金融商务区·2026北京国际花展 正式拉开帷...
2026中关村毕业季|AI“吃... “上帝会掷骰子吗?” 在联想未来中心的“与智者同场”展区,一位海淀学子对着屏幕问道。 爱因斯坦微微前...
原创 今... 今日为5月23日,国际现货黄金价格在4500美元/盎司整数关口附近徘徊不前,日内最低触及4480美元...
三连亏后变为“无主”状态,农尚... 从吴亮手中接盘农尚环境(300536)不足三年后,林峰如今让出了公司控制权,上市公司进入“无主”状态...
55岁湖南女首富出手!豪掷13... 快科技5月24日消息,与马斯克、库克并肩而坐,刚参加完国宴的湖南女首富周群飞就买了家上市企业。 近日...
外资加仓A股,岂是跟风这么简单... 熬过忙碌的交易日,在周末安静时段,理清接下来布局方向。本篇为大家准备了5条要闻,涵盖市场动态、行业变...
原创 俄... 在全球能源的残酷牌桌上,手里攥着石油,腰杆子才能硬气。长期以来,中东的沙漠、俄罗斯的冰原、美国的页岩...
喜力啤酒有产品将涨价,华润啤酒... 来源:红星新闻 红星资本局5月22日消息,今日,红星资本局从雪花啤酒(厦门)有限公司、华润啤酒方面获...
原创 金... 心理预期调整刻不容缓,五月二十二日,黄金价格或将重现十五年前的历史性低迷。 近期若您密切关注着黄金市...
原创 马... 埃隆·马斯克如果能让SpaceX实现“科幻小说”级别的目标,他可能获得1万亿美元的收入。 埃隆·马斯...
涨涨涨!放开限制、可加杠杆!这... 韩国股市站在风口上! 据最新消息,为吸引更多海外资金进入股市,韩国政府计划放开限制,允许境外投资者直...
下周9家上会丨科创板首单IPO... IPO及再融资上会预告 据交易所官网审核动态信息,下周(5.25-5.29)IPO上会审核6家企业,...
富途、老虎市值蒸发1/4!或被... 来源:金融时报 5月22日,中国证监会宣布依法对Tiger Brokers (NZ) Limited...
马爸爸的好兄弟钱多多搞了杀猪盘... *此图由AI生成 作者| 史大郎&猫哥 来源| 是史大郎&大猫财经Pro 上周四,港股经纬天地大崩盘...
原创 壳... 编辑:XL 国际能源圈最近炸开了锅,壳牌这家百年石油巨头在2026年3月与委内瑞拉政府正式签署多项油...
存储热潮愈演愈烈!奖金拿到手软... 财联社5月24日讯(编辑 卞纯)在席卷全球的存储芯片热潮中,韩国“存储芯片双雄”SK海力士和三星无疑...
揽牌、合作、生态,跨境支付头部... 近日,国内头部跨境支付机构密集落地海外重要布局,一方面,连连数字、PingPong两家公司相继在中东...
原创 帮... 老铁们,周末好!我是帮主郑重。刚扫了一眼下周的财经日历,好家伙,事件一个接一个,堪称“消息面轰炸周”...
海南省住建厅与中国石化海南石油... 5月22日,中国石化海南石油分公司代表、党委书记李新强、总经理蔡文东一行赴海南省住建厅拜访交流。省住...