map

use

  • Map an array (perform some operation on each item in the original array and return the result of the operation in the new array)
  • The original array will not be modified

parameter

  • map(callback,_this); // (callback function, this points to)
  • Callback (item,index,array)//

The basic use

var arr = [1.2.3.4]
var newArr = arr.map(function(){
    // This points to document
    console.log(this);
    // If there is no second argument, this refers to Window
},document)

Copy the code
var arr = [1.2.3.4]
var newArr = arr.map(function(){
    return item*2;
})
console.log(arr,newArr);
Copy the code

encapsulation

Array.prototype.mapNew = function(callback){
    //1. Check whether the user passed in a callback function
    if(typeofcallback ! = ='function') {throw new Error(callback+'is not a function');   
    }
    
    //2. Get who called this method. This refers to the array that called map
    var arr =this;
    
    //3. Create a new array because the original array will not be modified
    var newArr = [];
    
    //4. If this pointer is passed in, process this pointer
    var _this = arguments[1] | |window;
    
    //5. Do the related traversal
    for(var i=0; i<arr.length; i++){//6. Perform callback (modify this to item, index, array)
        newArr.push(callback.call(_this,arr[i],i,arr));
    }
    return newArr;
}
Copy the code

test

var arr = [1.2.3.4];
var newArr = arr.mapNew(function(item){
    return item*2
})
console.log(arr,newArr);
Copy the code

filter

use

  • Data screening
  • Returns all qualifying elements in a new array; If no element matches the criteria, an empty array is returned.

parameter

  • filter(callback,_this);
  • callback(item,index,array)

The basic use

var newArr = arr.filter(function(){
    // This points to document
    console.log(this)},document)
Copy the code
var arr = [1.2.3.4];
var newArr = arr.filter(function(){
    return item%2= =0
},document)
console.log(newArr)
Copy the code

encapsulation

Array.prototype.filterNew = function(callback){
    //1. Check whether the user passed in a callback function
    if(typeofcallback ! = ='function') {throw new Error(callback+'is not a function');   
    }
    var arr = this;
    var newArr = [];
    var _this = argument[1] | |window;
    for(var i=0; i<arr.length; i++){// If the callback result returns a true value
        if(callback.call(_this,arr[i],i,arr){ newArr.push(arr[i]); }}return newArr;
}
Copy the code

test

var arr = [1.2.3.4];
var newArr = arr.filterNew(function(item){
    console.log(this);
    return item%2= = =0;
})
console.log(arr,newArr);
Copy the code

forEach

The characteristics of

  • No return value

The basic use

var arr = [1.2.3.4];
var newArr = [];
arr.forEach(function(item,index,arr){
    console.log(this);
    newArr.push(item*=2);
},document)
console.log(newArr);
Copy the code

encapsulation

Array.prototype.forEachNew = function(callback){
    if(typeofcallback ! = ='function') {throw new Error(callback+'is not function');
    }
    // Get who called forEach
    var arr = this;
    var _this = arguments[1] | |window;

    for(var i=0; i<arr.length; i++){ callback.call(_this,arr[i],i,arr); }}Copy the code

reduce

The characteristics of

  • It’s an accumulator

parameter

  • reduce(callback,initValue); (callback function; The initial value)
  • Callback (prev,current,index,array)(initial value, or return value after calculation; Current element; Current element index; Current array)

The basic use

// Find the maximum value in the array
var n = arr.reduce(function(pre,curr){
    return Math.max(pre,curr)
})
console.log(n);
Copy the code
// Flatten the array
var arr = [[1.2], [3.4], [5.6[7.8]]];

function mapArr(arr){
    return arr.reduce(function(pre,curr){
        return pre.concat(Array.isArray(curr)? mapArr(curr):curr); }}, [])console.log(mapArr(arr));
Copy the code
// Determine the number of occurrences of each character in the string
 var str = "aabbcc";
 var obj = str.split(' ').reduce(function(pre,cur){
     if(pre[cur]){
         pre[cur]++;
     }else{
         pre[cur] = 1;
     }

     returnpre; }, {})Copy the code
// Extract the query parameter from the URL
var url = "http://www.baidu.com?username=alley&age=18";

var obj = url.substr(url.indexOf("?") +1).split("&").reduce(function(pre,cur){
     var key = cur.split("=") [0];
     var val = cur.split("=") [1];
     pre[key] = val;
     returnpre; }, {})Copy the code

encapsulation

Array.prototype.reduceAlley = function(callback,initVal){
    if(typeofcallback ! = ='function') {throw new Error(callback+'is not function');
    }

    var arr = this;
    // Check whether the initial value is passed in. Default is false
    var isInitVal = false;
    var prev;// Store the last value

    // Check whether the initial value exists
    if(initVal){
        // Change the status value to true if it exists
        isInitVal = true;
        // Copy the initial value to the previous result
        prev = initVal;
    }

    for(var i=0; i<arr.length; i++){// Check whether the initial value exists
        if(isInitVal){
            // Perform callback to assign the last result to prev
            prev = callback(prev,arr[i],i,arr);
        }else{
            // Assign the first value of the array to prev and change the state value to true if it does not exist
            prev = arr[i];
            isInitVal = true; }}return prev;
}

Copy the code