vue,js中高阶函数的使用


在用vue.js开发过程中为了使代码不那么复杂化,我们常常需要记住一些js中高阶函数的用法,这里推荐3中高阶函数的用法:filter,map,reduce

这里用一个小栗子来记录一下:

 const nums = [12, 23, 22, 18, 100, 67, 48, 88]

需求1:对数组进行遍历筛选小于50的数字,如果不用高阶函数的话,我们可能需要非常冗长的代码来完成这样的需求

如上,这样写还不能对新数组进行排序,非常的复杂冗长,所以引入了我们的高阶函数filter(后面的长代码就不一一列举了!!实在太难写了基本上都是换汤不换药的类型)

filter:回调函数的返回值为true时将回调函数参数的值放入新数组

而如果用高阶函数使用的话就仅需用一行代码来完成这个需求

这里对filter函数的参数进行解释:从filter函数的定义(这里就不列举filter的定义了)来说,他的参数必须是一个函数,函数内需要有形参n,然后在函数内部return表达式

2.对数组的每个参数进行*2

  这里用高阶函数中的map函数。

map:对数组对象中的值进行操作,将操作后的数放入新数组

话不多说,直接上代码。

map函数的用法参考filter

3.对数组中的所有参数进行相加。

reduce函数:对数组中所以内容进行汇总

这里对reduce函数进行解释:

    同意reduce方法需要传入的参数也为一个函数,但函数内部需要两个形参,此处用preValue和n来表示,然后再返回两个参数相加得到的值(参数的具体意义突然搞忘了,所以此处不敢妄加解释)。

二.三个方法间的混合使用

用箭头函数再次简写可以写为:

请朋友们自行理解...


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM