Catalog

1,map() Method

2,filter（） Method

3,reduce（） Method  

4,forEach（） Method

1,map() Method

map（） Method will execute a function on each element of the array to create a New array , Will not execute functions that are not worth it , And the original array will not be changed

map （） The method has three arguments  

• All elements of the array
• Index value of array element （ Subscript ）
• The array itself

for example ：

Add 3;

        const arr = [1,6,7,3,4,5];
    
        const newarr=arr.map((item,index,array)=>{
            console.log(' Elements in an array '+item);
            console.log(' Index of each array element '+index);
            console.log(' The array itself '+array);
            return item +3 ;
        })
        console.log(newarr);

design sketch

Be careful ： If there is only one parameter in the callback function , Sure Omit Index parameters and Array parameters

2,filter（） Method

filter（） Function is a filter function , Filter out the qualified functions And return and create a new array , It doesn't change the original array , Nor will it perform functions on empty arrays

filter（） function   And map（） Function also has three parameters

• All elements of the array
• Index value of array element （ Subscript ）
• The array itself

When the callback function has only one value value The other two parameters can be omitted

for example ：

Put the following array value Greater than 18 The number of is returned to a new array

        const arr = [1, 6, 7, 3, 4, 5, 102, 99, 78];
        const newarr = arr.filter((value) => {
            return value > 18;
        })

        console.log(newarr);

design sketch ：

3,reduce（） Method  

reduce（） Method executes user supplied on each element of the array “reducer” Callback function , Pass in the calculated return value from the previous element in sequence , Simple speak Namely Returns the sum of all elements in the array   The value of the original group will not be changed   Callback functions will not be performed on empty arrays

reduce（） There are four parameters

• The first parameter    total -- Is the initial value , Return value again Must write
• The second parameter    currentValue -- The current element               Must write
• The third parameter     currentIndex-- Index of the current element     Write but not write
• Fourth parameter     arr -- The array itself                             Write but not write

You can also specify an initial value

for example 1

Find an array arr= [1,54,3,3,9,100] The cumulative value of

        const arr= [1,54,3,3,9,100];
        const newarr = arr.reduce((total,currentValue)=>{
            console.log('total Value '+total,'currentValue Value '+currentValue);
                return total + currentValue;
        })
        console.log(newarr);

design sketch ：

  for example 2 

When I specify the default value as 30 When ,arr The cumulative value of is ;

        const arr= [1,54,3,3,9,100];
        const newarr = arr.reduce((total,currentValue)=>{
            console.log('total Value '+total,'currentValue Value '+currentValue);
                return total + currentValue;
        },30)
        console.log(newarr);

here total The initial value of becomes 30

4,forEach（） Method

forEach() Method   be used for Call each element of the array , And put the elements Pass to callback function    The value of the original group will not be changed   Callback functions will not be performed on empty arrays

forEach() The function has three arguments

• currentValue ： Array current value
• index： The array is currently worth indexing
• arr： The array itself

for example ：

Get array arr All elements of

        const arr = [12,54,37,28,10];
    
        const newarr=arr.forEach((item,index,array)=>{
            console.log(' Elements in an array '+item);
            // console.log(' Index of each array element '+index);
            // console.log(' The array itself '+array);
        
        })

design sketch ：

Summary ： The above is what this article introduces ES6 Several new methods commonly used in , If you want to know more relevant knowledge, you can consult relevant literature .