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