Introduction of usage

map

role

Creates a new array that returns the value returned after each element in the array is called once;

grammar

let newArr = arr.map(function callback(curValue, index, array){}[, thisArg])

  • Callback: a callback function to be executed on each element;
  • CurValue: the element being processed in the array;
  • Index: The index of the element being processed in the array, optional;
  • Array: an array in which the map method is called.
  • ThisArg: execute callback value the value is used as this;

The sample

Let’s do something with arrays using their map method

// Prints out the age of each item in the array
let arr = [
  {
     name: 'youyan'.age: 1
  },
  {
     name: 'shaoyan'.age: 10
  },
  {
     name: 'xiaoyan'.age: 18
  },
  {
     name: 'dayan'.age: 28},];let ageArr = arr.map((item) = >item.age)
// The new array is: [1, 10, 18, 28]
Copy the code

filter

role

Filter elements that pass the specified function test;

grammar

let newArr = arr.filter(function callback(curValue, index, array){}[, thisArg])

  • Callback: a callback function used to test the execution of each element, returning true to indicate that the element has passed the test.
  • CurValue: the element being processed in the array;
  • Index: The index of the element being processed in the array, optional;
  • Array: an array in which the filter method is called.
  • ThisArg: execute callback value the value is used as this;

The sample

// Filter out values greater than 10 in the array
let arr = [1.2.5.15.190.88.63];
let newArr = arr.filter((item) = > item > 10);
// [15, 190, 88, 63]
Copy the code

reduce

role

This is an array merge method that iterates over a given array. The first argument is the result of the iteration.

grammar

arr.reduce(callback, initValue)

  • Callback (pre, cur, index, ARR): Function to be executed
    • Pre: Return value of the last call to the function
    • Cur: Current element
    • Index: indicates the index of the current element
    • Arr: array to be traversed
  • InitValue: initial value for function iteration

If initValue is not provided, Reduce executes the callback method starting at index 1, skipping the first index. Pre defaults to the first element of the array. If initValue is provided, it starts at index 0.

The sample

A few examples:

  • Array sum
// Use reduce to sum the array
 let arr = [1.2.3.4]
 arr.reduce((pre, cur) = >pre + cur);
Copy the code

  • Array flattening

    Copy the code

/ / to the [[1, 2, 3], [4, 6], [7,8,9]] flat let arr = [[1, 2, 3], [4 and 6], [7,8,9]]. arr.reduce((pre,cur)=>{ return pre.concat(cur); }, [])

// If linitValue is set to [], the callback will be executed starting at the index 0 of the array, and each item will be concatenated to the array as the initial value for the next iteration

- for the number of occurrences of each element in the array ` ` ` javascript let arr = [' 1 ', '2', '2', '3', '1', '1', '4', '2', '5'); arr.reduce((pre, cur)=>{ if(pre.hasOwnProperty(cur)){ pre[cur] ++; } else { pre[cur] = 1; } return pre; }, {})Copy the code

Manual implementation

Map, Filter, and Reduce methods are all based on the Array prototype. Here is a simple implementation of these methods:

map

// Implement my map method
Array.prototype.myMap = function(fn){
    const res = [];
    let arr = this;   // This refers to who calls the function
    for(let item of arr){
        res.push(fn(item))
    }
    return res;
}

/ / call
let double = (v) = > 2 * v;
let arr = [1.2.3.4];
arr.myMap(double);    // [2, 4, 6, 8] The verification is successful
Copy the code

filter

Array.prototype.myFilter = function(fn) {
   const res = [];
   let arr = this; 
   for(let item of arr){
      if(fn(item)){   // Verify by function methodres.push(item); }}return res;
}

/ / call
let fn = (v) = > v > 5;
let arr = [1.3.6.8.9];
arr.myFilter(fn);   / / [6, 8, 9]
Copy the code

reduce

Array.prototype.myReduce = function(. args){
   let arr = this;     // Call the array of this method
   let fn = args[0];    // The function to call
   let initValue, index;   // Define the initial value
   if(args.length > 1){
       initValue = args[1];
       index = 0;
   } else {
       initValue = arr[0];
       index = 1;
   }
   let value  = initValue;
   for(let i=index, len = arr.length; i< len; i++){
       As mentioned earlier, there is a default value to start indexing from the 0th item and no default value to start indexing from the first item
       value = fn(value, arr[i]);
   }
   return value;
}

// call, no default value
[1.2.3.4].myReduce((pre, cur) = > pre + cur)   / / 10
// There are default values
[1.2.3.4].myReduce((pre, cur) = > pre + cur, 10)   / / 20
Copy the code