【javaScript学习之路】高阶函数之数组篇

之前在js数组中循环遍历一直使用的是for循环，代码繁琐。昨天在一个视频中学习到了 map、filter和reduce的使用方法，今天记录一下，方便以后忘记时能及时查看，也分享给学习js的同学~

首先来写一个案例；

    let arr = [50,10,90,400,500,40,30,900];

需求一：是将数组中小与100的所有数字放进一个新的数组中
需求二：并且将新数组的数字进行乘2的操作
需求三：把新数组中的数组进行相加并打印出最后的结果

    //以前的思路是使用for循环进行操作，如下：
    
    let arr2 = [];     //定义一个新的数组
    
    for(let i of arr){
        if(i<100){
            arr2.push(i);
        }
    }
    //这样的到小于100的数组；
    
    for(let i in arr2){
        arr[i] = arr[i]*2;
    }
    
    //讲数组中的数组*2处理
    
    let tiotal = 0;
    for(let i of arr2){
        tiotal += i
    }
    
    //最后将数组中的数字进行相加

这样代码非常繁琐，学习高阶函数之后就可以使用map、filter、reduce进行操作

首先使用filter进行过滤，将小于100的的数字进行处理

    let arr = [50,10,90,400,500,40,30,900];
    let arr3 = arr.filter((i)=>{
        return i<100;
    })
    //reduce函数接收一个回调函数，
    //回调函数中 i为每次遍历的值，第一次为50，第二次10，第三次90 ……；
    //然后 return 出小于100的数字 赋值给arr3数组

然后使用map函数进行数据乘以二的处理

    arr3.map((i)=>{
        return i*2;
    })
    cosole.log(arr3)
    //map函数同样也是接受一个回调函数
    //return 数字*2
    //此时打印的数组应为 [100,20,180,80,60]   

最后使用reduce进行数组的数字整理

    let total2 = arr3.reduce((prevValue,i)=>{
        return prevValue + i
    },0)
    
    console.log(total2);
    
    //reduce函数相对于map和filter比较难一些；
    //reduce函数需要接收两个值，第一个为回调函数，第二个值为默认值(0)；
    //回调函数中的prevValue就是 第二个值(0)，
    //每次循环 prevValue会变成上一次的值，比如 第一次prevValue为0，因为默认值为0，第二次为100，第三次为20，第四次为180,；(参考arr3数组中的值)
    //最后打印出最终数字为440

也可以缩写

    let arr = [50,10,90,400,500,40,30,900];
    let total3 = arr.filter((i)=>{
        return i<100;
    }).map((i)=>{
        return i*2;
    }).reduce((prevValue,i)=>{
        return prevValue + i
    },0)

或者

    let arr = [50,10,90,400,500,40,30,900];
    let total4 = arr.filter(i => i<100).map(i => i*2).reduce((pre,i)=> pre+i);

第一次写文章，如果太乱不要diss。