美文网首页
.map() .filter() .forEach() .red

.map() .filter() .forEach() .red

作者: xinhui9056 | 来源:发表于2019-01-27 17:26 被阅读0次

    Array.prototype.map()

    创建一个新的数组,其结果是该数组中每个元素都调用一个提供的函数后返回的结果。

    语法:
    var newArray = arr.map(function callback(currentValue, index, array){ 
        //对每个元素的处理 
    }) 
    
    参数

    callback:用来生成新数组用的函数。
    callback的参数:
    currentValue:当然正在处理的元素
    index:正在处理元素的索引
    array:调用map方法的数组(就是.map()前面的也就是arr)

    var a = [1,2,3,4];
    var newa = a.map(function(x){
     return x = x+1;
    });
    console.log(newa,a); 
    //newa : 2 3 4 5   //a: 1 2 3 4
    

    Array.prototype.filter()

    创建一个新数组,其结果是调用一个函数后过滤得的元素。

    语法
    var newArray = arr.filter(function callback(curValue, index , array){ 
    //函数代码 
    }); 
    
    参数

    callback: 调用的过滤函数
    curValue: 当前元素
    index: 当前元素的索引
    array:调用filter的数组

    var a = [1,2,3,4];
    var newa = a.filter(function(x){
     return x > 1;
    });
    console.log(newa,a); 
    //newa : 2 3 4    //a: 1 2 3 4
    

    基本用法就是以上那些
    因为都是对元素的遍历,所以我猜想 如果把map中调用的函数换成filter里面的过滤函数是否能得到相同的结果呢。
    于是

    var a = [1,2,3,4];
    var newa = a.map(function(x){
     return x > 1;
    });
    console.log(newa,a); 
    //newa :false true true true     //a: 1 2 3 4
    

    可以看出来newa 的到的并不是数字,它们只是对当前元素调用函数后(x是否大于1)的结果。而filter 会将结果为true的数组存到新的数组里面。

    Array.prototype.forEach()

    数组的每一个元素执行一次提供的函数。

    var a = [1,2,3,4];
    var newa = a.forEach(function(x){
     return x > 1;
    });
    console.log(newa,a);  //undifined  //1 2 3 4 
    
    var a = [1,2,3,4];
    var newa = a.forEach(function(x){
     console.log(x);
    });
    console.log(newa,a);  
    //1
    //2
    //3
    //4
    //undifined  //1 2 3 4 
    

    从上面可以看出forEach 只是让数组里面的元素执行一次函数,并不会对原数组产生影响,也不会获得新的数组

    Array.prototype.reduce()

    接受一个函数作为累加器,依次加上数组的当前元素。

    语法
    arr.reduce(callback(previousValue, currentValue, currentIndex,array),initialValue); 
    
    参数

    callback:累加器函数
    previousValue: 上一次调用函数后的返回值,或者是提供的初始值(initialValue)
    currentValue:当前数组的元素
    currentIndex:当前数组元素的索引
    array:调用reduce的数组
    initialValue:初始值,作为第一次调用callback的第一个参数,也可不写,默认为0;

    var a = [1,2,3,4];
    var new = a.reduce(function(total, current){
     return total + current;
    },100);
    console.log(new,a);
    //10   //1 2 3 4
    
    其实上面介绍的全是遍历函数,但都有细微的差别,每个都[各司其职](好像有点废话),所以当想改变数组的时候用map,想对数组进行过滤用filter,累加数组用reduce。

    相关文章

      网友评论

          本文标题:.map() .filter() .forEach() .red

          本文链接:https://www.haomeiwen.com/subject/wnqnjqtx.html