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 code

Also record the above weight (g) as an array

var w = [50, 80, 120, 40, 110, 60]
Copy the code

Farmer: I want to ripen quickly (batch operation)

We want to ripen this batch of potatoes for weight gain using the forEach method

potatos.forEach(potato =>  potato.weight += 20 )
Copy the code

Of course, Map pops up: SO can I!

potatos.map(potato => potato.weight += 20 )
Copy the code

However, while maps can also operate in batches, it is semantically more appropriate to use the forEach method

Farmer: Give me a prepared weight form

The best thing a map does is map, a map that generates characteristic information about the raw data

ForEach, by contrast, does not return a value, even if a return is added

 w = potatos.forEach(potato => { return potato.weight += 20 })
//undefined
Copy the code

The map returns a value that aggregates the weight of potatoes into a table

w = potatos.map(potato => { return potato.weight += 20 })
//[ 70, 100, 140, 60, 130, 80 ]
Copy the code

Boss: I just want big potatoes (filter)

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 code

Returns 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 code

Some 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
Copy the code

Every executes a callback for each element until it finds an element (a smaller potato) that causes the callback to return false, and returns true until the loop is complete and no false is returned

Customer: Give me a big potato (return a matching one)

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 code

Find 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: What 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 code

When 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’s the harvest this year (recursive summation)

Who has the math to add the weight of those potatoes on the chart

Reduce says: I’ll do it

Var sum = weight.reduce((sum, w) => {return w + sum},0) //460 // Does not change the tableCopy the code

The reduce() method takes a callback function as its first argument, which in turn takes four arguments, respectively; PreviousValue => initial value or superimposed value of 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 code

Reduce capability is actually more than this, here you can know the basic usage

conclusion

In the case of Potato, we have learned the basic application scenarios of these methods, as well as some advanced uses, such as the reduce mentioned above, which can be used to flatten arrays and de-duplicate arrays, etc., and will be further studied and introduced in the future

Hopefully this article has helped you distinguish between these methods

This is my personal website, record the front-end learning drip, welcome to visit www.ssevenk.com