1. Overview

From the first for-loop traversal method to the endless variety of traversal methods that have emerged since then, the biggest difference is the difference in the application scenario. The most important thing we need to remember is which method is appropriate under what circumstances.

2. Analysis

Here is a pile of potatoes. If you change the code, it can be expressed 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 Code

Also record the weight (g) above as an array

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

Farmer: I want to ripen (batch operation)

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

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

Of course, map also jumped out: I can!

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

However, while map s can be manipulated in batches, the forEach method is more semantically appropriate

Farmer: Give me a sorted weight table

The best thing map can do is map, which generates the characteristic information of the original data

In contrast, forEach has no return value, and even returns are not useful

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

map returns a value that summarizes the weight statistics of potatoes and compiles a table

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

Boss: I only want big potatoes (filter)

filter means filtering. By name, you know that filtering is what filters do.

var bigOnes = potatos.filter(potato => { return potato.weight > 100 })

//[ { id: '1003', weight: 120 }, { id: '1005', weight: 110 } ]
Copy Code

Returns a new array of objects without changing the original array

Vendor: Do you have a big one?

The neighbouring vendor laughed at us and said that we were all potatoes. Those that didn't work were not allowed to look for a giant.

When you just need to decide if any of the arrays are qualified (one will do), you need our some method to get on the stage

var hasbig = potatos.some(potato => { return potato.weight > 100 })

//true
 Copy Code

Our little man some where goes to the potato warehouse to look for it and returns to report true if he finds one that meets the criteria so he doesn't traverse it all and doesn't do any extra work (good performance)

Vendor: Are they all big (all in line)

The vendor refused. I don't believe you sent this every body to check

var allbig = potatos.every(potato => { return potato.weight > 100 })

//false
 Copy Code

every performs a callback on each element until it finds an element that causes callback to return false (a smaller potato), then returns false, and true until the traversal is complete and false is not returned.

Customer: Give me a big potato (return one that matches)

Here comes a customer who wants a big potato find and volunteers. I'll go find it for him

var big = potatos.find(potato => { return potato.weight > 100 })

//{ id: '1003', weight: 120 }
Copy Code

find is similar to somes in that they both look for the right one. One can just go in and search around somes and return a "yes", while find takes the potato out (returns the first eligible object)

Cashier: This potato is the first to come from the warehouse (return number)

The cashier is ready to record the sale

"Oops, this potato is the number one in the warehouse?" find said: "Oops, I patronized holding the potatoes and didn't see the number one."

"You careless creature, you knew you had findIndex with you"

var i = potatos.findIndex(potato=>{ return potato.weight > 100 })

//2
 Copy Code

findIndex is used when you need to know the index of the desired element

findIndex returns the first qualified index number

Boss: What's the harvest this year (recursive accumulation)

I don't know what the harvest will be like this year. Who can add the weight of the potatoes on the table?

Reduc said: Can't I come?

var sum = weight.reduce((sum, w) => { return w + sum },0)

//460
//Does not change the original table
 Copy Code

The reduce() method accepts a callback function as the first parameter, and the callback function accepts four parameters, respectively.
1. PreviousValue =>Initial value or the value superimposed by the last callback function;
2. currentValue =>The value to be executed by this callback (loop);
3. Index=> index value of "currentValue";
4. arr =>the array itself;
The reduce() method returns the return value of the last call back function.

This is also possible

  var sum = potatos.reduce((sum, p) => 
  { return p.weight + sum },0)
  
  //460
 Copy Code

reduce is more than that, you know the basic usage here

3. Summary

         On potatoes, we learned the basic application scenarios of these methods, as well as some higher-order usages, such as reduce mentioned above, which can be used for flat arrays, array unwinding, and so on. We will do further research and introduction later.

         For more exciting content, please scan the QR code below and pay attention to my WeChat Public Number (Java Light) for the first update!