preface

This time, I mainly learned three advanced functions: Filter, reduce and map. I was very impressed by learning for the first time, so I wanted to share it and learn it together. This time combined with small case study, better understanding

This time will first use the for of method to achieve the requirements, through the method of advanced functions to achieve, and then further combined with the chain method or arrow function. 👇 👇 👇 👇 👇 👇 👇

The body of the

demand

1. Requirement: Extract all numbers less than 100

2. Requirement: All numbers less than 100 *2

3. Requirement: Add all the numbers in requirement 2

Implementation of the for in method

const arr=[255.100.120.10.55.5.45]
const newNum=[]
for(let i of arr){
## console.log(i)
    if(i<100){
	newNum.push(i)      
    }
}
console.log(newNum)  / / [45] 5, 10, 55,

const new2Num=[]
for(let i of newNum){
    new2Num.push(i*2)}console.log(new2Num)  / / [20, 110, 10, 90]

let Num=0
for(let i of new2Num){
    Num+=i
}
console.log(Num) mainly uses the array push method, so you need to create a new array each time to receive the resultsCopy the code

Filter, Reduce, and Map functions

The filter function, whose argument is a callback function, must return a Boolean as a result of the callback function

When true is returned, the callback parameter is automatically returned to the array, so a new array is needed to receive it

When false is returned, the result is automatically filtered out

You can use it to implement the need to filter out all numbers less than 100, as well as more advanced and efficient syntax, as shown below

const arr=[255.100.120.10.55.5.45]
let newNum=arr.filter(function(i){
    return i<100
}
console.log(newNum)/ / [45] 5, 10, 55,
Copy the code

The map function is used to process each element of an array and return a new array.

Can be used to handle the requirement that all numbers less than 100 all *2, as follows

let new2Num=newNum.map(function(i){
    return i*2
})
console.log(new2Num)/ / [20, 110, 10, 90]
Copy the code

Use of the reduce function: Reduce summarizes all the contents in the array

Two parameters need to be passed, the first parameter is the function, which has the function of accumulation, and the second parameter represents the initial value, which is the first element of the array by default. If it is 0, it can not be passed. Take requirement 3 as an example, add and sum all the numbers in requirement 2

First time: preValue<-0 I <-20, and so on

Second: preValue 20 I 110

Second: preValue 130 I 10

Second: preValue 140 I 90

230

let Num=new2Num.reduce(function(preValue,i){
	return preValue+=i
},0)
console.log(Num) / / 230
Copy the code

shorthand

In fact, the above can continue to shorthand, with less code, to achieve the same requirements. Because they return a new array each time, all can be done through chained programming or arrow functions

In fact, the personal shorthand is not very cold, may be because I am still in the learning stage, basic understanding is more important, but on the outside improve very useful, ho ho ho ho

Arrow function

const arr=[255.100.120.10.55.5.45]
let total = arr.filter(i= >i<100).map(i= >i*2).reduce((PreValue,i) = >PreValue+i)
console.log(total) / / 230
Copy the code

Chain programming

let Num=arr.filter(function(n){
	return n<100
}).map(function(n){
	return n*2
}).reduce(function(preValue,n){
	return preValue+=n
})
console.log(Num)/ / 230
Copy the code

summary

The filter function:

It is used to filter all elements that meet the criteria, and returns a new array if true

The map function:

Each element in the array is processed by a function and a new array is returned.

The reduce function:

Returns a result by summing the elements of an array