杨梵
侠客
侠客
  • UID477
  • 粉丝0
  • 关注0
  • 发帖数12
阅读:4335回复:0

javaScript数组高阶函数的应用

楼主#
更多 发布于:2020-01-10 18:33
   开发项目的时候常常遇到数组处理,除了我们熟知的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)
一串代码就搞定。
游客

返回顶部