filter\reduce\map数组高阶函数的基本使用

最新推荐文章于 2024-07-24 11:09:48 发布

平克弗洛伊德脑残粉

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量93

点赞数

文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_44009082/article/details/120133965

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
				
				</div>
		<script src="/Users/sunsumin/Desktop/learning vue.js/vue.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
			       const nums = [10,20,111,222,444,40,50]
					 //1.filter函数的使用(过滤)
			//filter中的回调函数有一个要求，必须返回一个布尔值
			//当返回true时，函数内部会自动将这次回调的n加入到新的数组中
			//当返回false时，函数内部会过滤掉这次的n
			
			let newNums = nums.filter(function(n){
				return n<100
			})
			console.log(newNums)
			
			         //2.map函数的使用（映射）
			let new2Nums = newNums.map(function(n){
					return n*2
				})
				console.log(new2Nums)
				
				
				//3.reduce函数的使用
				//作用：对数组中所有的内容进行汇总
				//new2Nums.reduce(参数1,参数2)//参数一是回调函数，参数2通常是0
				let total = new2Nums.reduce(function(preValue,n){
					return preValue + n
				},0)
				console.log(total)
				//第一次：preValue：0  n：20
				//第二次：preValue：0+20  n：40  
			    //第三次：preValue：20+40  n：80
			    //第四次：preValue：60+80  n：100
				//240
				//升级版！！链式编程！！！
				let sum = nums.filter(function(n){
					return n < 100
				}).map(function(n){
					return n * 2
				}).reduce(function(preValue,n){
					return preValue + n
				},0)
				console.log(sum)
				
				//最终ES6简写版！！！！用箭头函数！！！
				let sum1 = nums.filter( n => n < 100).map( n => n * 2).reduce((pre,n) => pre + n,0)
				console.log(sum1)
			</script>
	</body>
</html>

建议使用箭头函数，使代码更简洁

平克弗洛伊德脑残粉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
filter\reduce\map数组高阶函数的基本使用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> </div> <script src="/Users/sunsumin/Desktop/learning vue.js/vue.js" type=.
复制链接

扫一扫