阅读:4335回复:0
javaScript数组高阶函数的应用
开发项目的时候常常遇到数组处理,除了我们熟知的splice、push、shift等操作,还有一些es6的高阶操作。
主要讲的是我常用的fliter、map、reduce。 一、filter 这兄弟主要是返回一个布尔值,可以用它来筛选我们所需要在某个条件下的数组值,不用循环去判断获取。 现在给一个数组 let arry = [100, 20, 30, 102, 200, 30]。只需要小于100的值,大于100的过滤掉。常规操作就是for循环,我的操作用filter. let newArry = arry.filter(function(n){ return n<100 //小于100的返回true 被返回到新的数组 newArry,大于100的返回false自动过滤 }); 最终打印结果 newArry =[20, 30, 30] 二、map 这个不是地图的意思,计算属性。我们拿到数组可以要对数组里面值进行操作,我们就可以考虑map。这兄弟很简单。 给一个数组 let arry = [100, 20, 30, 102, 200, 30];和上面一样吧! let newArry = arry.map(function (n){ return n *2 //每一项都乘以2 }) 返回的新数组 newArry = [200,40,60,04,400,60]; 三、reduce 这东西比较少用,常用于计算总量,可以理解为数组递归,但并不是递归,意思自己可以百度理解,但是它能实现的功能代码一上你就懂。 let arry = [1, 2, 3]; arry .reduce(function (preValue, newValue){ //第一个值是上一次值 第二个值是新的值 递归 return preValue+newValue }, 0) //0呢是初始化值为0 最终执行结果是8。 执行顺序1+2 = 3 =》3+2=5=》5+3=8 四、链式操作 现在有个需求给一个数组,计算小于100的数在乘以20每个值累加结果。 let arry = [100,20,30,102,200,30]; let newArry = arry.filter(function(n){ //返回小于100的 filter返回的是true和false的状态码 [20, 30, 30] return n<100 }).map(function (n){ // 计算 [400, 600, 600] return n *20 }).reduce(function (preValue, newValue){ //第一个值是上一次值 第二个值是新的值 递归 return preValue+newValue }, 0) //初始化为0 console.log(newArry)自己手动打印吧,结果,支持链式操作 简洁,再也不用循环看的头疼,用起来是很爽。 如果你想让代码更简洁,那可以使用箭头函数 let arry1 = [100,20,30,102,200,30]; let newArry1 = arry.filter((n) => n<100).map((n) => n*20).reduce((preValue, newValue) => preValue+newValue) console.log(newArry1) 一串代码就搞定。 |
|