preface
From the for loop traversal method I learned at the beginning to the endless variety of traversal methods that emerged later, the biggest difference is the difference in application scenarios.
The most important thing to remember is which method is appropriate for which situation.
Start with potatoes
Here is a bunch of potatoes, which can be represented in code as follows:
var potatos = [{ id: '1001'.weight: 50 },
{ id: '1002'.weight: 80 },
{ id: '1003'.weight: 120 },
{ id: '1004'.weight: 40 },
{ id: '1005'.weight: 110 },
{ id: '1006'.weight: 60 }]
Copy the codeAlso record the above weight (g) as an array
var w = [50.80.120.40.110.60]
Copy the codeFarmer: I want to ripen quickly (batch operation: forEach)
We want to ripen this batch of potatoes for weight gain using the forEach method
potatos.forEach(potato= > { potato.weight += 20 })
Copy the codeThe map method says: So can I!
potatos.map(potato= > { potato.weight += 20 })
Copy the codeMap added, I can also update the weight statistics table to a new one for you
w = potatos.map(potato= >
{ return potato.weight += 20 })
//[70, 100, 140, 60, 130, 80]
Copy the code“The big difference between forEach and map is that forEach does not return a value.” It doesn’t matter if you add a return to forEach
w = potatos.forEach(potato= >
{ return potato.weight += 20 })
//undefined
Copy the codeBoss: I just want a big potato.
From the name, we know that the work of filtering is done by the filter
var bigOnes = potatos.filter(potato= > { return potato.weight > 100 })
//[ { id: '1003', weight: 120 }, { id: '1005', weight: 110 } ]
Copy the codeReturns a new array of objects, without changing the original array
Vendor: Do you have a big one?
The peddler beside laughed at us and said, we are all small potatoes, useless that can not find a Big MAC to give him a look
Our some method comes into play when all we need to do is check if there are any conditions in the array (one will do)
var hasbig = potatos.some(potato= > { return potato.weight > 100 })
//true
Copy the codeSome of our little guys go to the warehouse where potatoes are stored and report true if they find one that matches the conditions, so they don’t go through all of them and don’t do extra work (good performance).
Vendor: Are they all big?
The peddler refused to accept, I do not believe you this is all big sent a every boy to check
var allbig = potatos.every(potato= > { return potato.weight > 100 })
//false
everyPerform one for each elementcallback'until it finds onecallback` return `false'of the element (not so big a potato), then return'false', and no return until traversal is completefalseIf so, return totrue
Copy the codeCustomer: Give me a big potato (return a match :find)
A customer came and wanted a large potato. I went to find him
var big = potatos.find(potato= > { return potato.weight > 100 })
//{ id: '1003', weight: 120 }
Copy the codeFind is similar to some in that it looks for one of the conditions, but some goes in and searches and returns “true”, while find picks up the potato.
Cashier: Which number is this potato in the warehouse?
The cashier is ready to record the sale
“Hey, which potato is in the warehouse?” Find says: “Oops I was so busy holding the potato that I didn’t see the number.”
“You careless bastard, you should have let findIndex go with you.”
var i = potatos.findIndex(potato= >{ return potato.weight > 100 })
/ / 2
Copy the codeWhen you need to know the index of the desired element, you can use findIndex
FindIndex returns the first index number that matches the condition
Boss: How is the harvest this year? (recursive sum :reduce)
Add the weight of those potatoes on the table add reduce and say, “Do I have to do it?
var sum = weight.reduce((sum, w) = > { return w + sum },0)
/ / 460
// Does not change the original table
Copy the code❝
The reduce() method takes a callback function as its first argument, which in turn takes four arguments: 1. PreviousValue => the initial value or the superimposed value of the previous callback function; CurrentValue => value that will be executed for this callback (loop); 3. Index => Index of currentValue; 4, arr => array itself; The reduce() method returns the value of the last call to the callback function;
❞
You can do that
var sum = potatos.reduce((sum, p) = >
{ return p.weight + sum },0)
/ / 460
Copy the codeReduce capability is actually more than this, here you can know the basic usage
The illustration
conclusion
In the potato body, we learned the basic application scenarios of these methods, and some advanced uses, such as the reduce mentioned above, can be used to flatten the array, array deduplication and so on. I hope this article will be helpful for you to distinguish these methods
instructions
❝
Note: The original article was seen in The following link:
- Vividly explain the differences between forEach, filter, map, some, every, find, findIndex, and reduce
❞
Front-end get up [1] front-end get up [1] Scan code concern xiaoyuanlianer666
Reference
[1]
Small round face: public account: Small round face (Xiaoyuanlianer666), Nuggets: Small round face.