JS中高阶函数的使用（filter/map/reduce）

案例：对vue中的const nums=[10,20,111,222,444,40,50]数组，实现3个需求：

1.取出所有的小于100的数

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

3.将所有new2nums全部相加，求出最终结果

（注：需求2是在需求1的基础上进行的；需求3是在需求2和需求1的基础之上进行的）

不用高阶函数的代码表示如下：

<script>
		const nums=[10,20,111,222,444,40,50]    //首先声明题目中所给的数组
		//实现需求1:取出所有的小于100的数
		let newnums=[]
		for(let i of nums)
		{
			if(i<100)
			{
				newnums.push(i)
			}
		}
		console.log(newnums)
		//实现需求2:将所有小于100的数字进行转化：全部*2
		let new2nums=[]
		for(let i of newnums)
		{
			new2nums.push(i*2)
		}
		console.log(new2nums)
		//实现需求3:将所有new2nums全部相加，求出最终结果
		let totalnums=0
		for(let i of new2nums)
		{
			totalnums+=i
		}
		console.log(totalnums)
</script>

运行结果如下：

 使用高阶函数的代码表示如下：

<script>
		const nums=[10,20,111,222,444,40,50]
		//filter函数的使用
		let newnums=nums.filter(function(n){
			return n<100
		})
		for(let i of newnums){
			console.log(i)
		}
		console.log(newnums);
		//map函数的使用
		let new2nums=newnums.map(function(n){
			return n*2
		} )
		console.log(new2nums);
		//reduce函数的使用
		let totalnums=new2nums.reduce(function(preValue,n){
			return preValue+n
		},0)
		console.log(totalnums);
</script>

运行结果如下：

 使用高阶函数的函数式编程代码表示如下：

<script>
		const nums=[10,20,111,222,444,40,50]
		let totalnums=nums.filter(function(n){
			return n<100
		}).map(function(n){
			return n*2
		} ).reduce(function(preValue,n){
			return preValue+n
		},0)
		console.log(totalnums);
</script>

 运行结果如下：

 使用箭头函数代替function的代码表示如下：

<script>
		const nums=[10,20,111,222,444,40,50]
		let totalnums=nums.filter(n => n < 100).map(n => n*2).reduce((pre,n) => pre+n);
		console.log(totalnums);
		
</script>

运行结果如下：

 总结：js的高阶函数（filter/map/reduce）可以使我们通过简洁的代码来实现我们所需要的功能，大大的减少了程序的代码量。