Vividly explain the difference between forEach, filter, map, some, every, find, findIndex, reduce

PS. (Recently settled intention to Denver, then went mainly to write articles here, these two days will pick himself wrote the article, rearrange sent here)

Foreword

Methods for loop iterates from the beginning to learn a variety of methods to traverse later after another, in fact, the biggest difference is the application of different scenarios. We need to remember is that by which method is appropriate under the circumstances.

Starting to pick potatoes

There are a bunch of potatoes, if replaced by the code, 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 }]
复制代码

While the above weight (g) recorded as an array

var w = [50, 80, 120, 40, 110, 60]
复制代码

Farmers: I want ripening (batch operations)

We hope that this batch of potato ripening all about, weight gain can be used in forEachthe method

potatos.forEach(potato =>  potato.weight += 20 )
复制代码

mapWay to say: I can!

potatos.map(potato => potato.weight += 20 )
复制代码

mapAdded, I can put the weight of statistical tables, a new update out to you

w = potatos.map(potato => 
{ return potato.weight += 20 })

//[ 70, 100, 140, 60, 130, 80 ]
复制代码

map and forEach biggest difference is that, forEach no return value. Even if your return is useless to add forEach

w = potatos.forEach(potato => 
    { return potato.weight += 20 })
    
//undefined
复制代码

Boss: I'm just a big potato (Filter filter)

filterFiltering is meant Judging from the name, you know living is such screened filter filterto dry

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

//[ { id: '1003', weight: 120 }, { id: '1005', weight: 110 } ]
复制代码

It returns a new array object, and does not change the original array

Vendor: You have no big ah (that meet)

Next to the small traders laughed at us that we this is small potatoes, parsnips that may not find a Big Mac gave him a look

Only when there is no need to determine the array qualifying time (on a trip) we need a somemethod debut

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

//true
复制代码

Our somelittle boy, potato storage warehouse to find, just find a qualified, returned, and told trueit does not traverse the whole, do not do the extra living (excellent performance)

Vendor: Is it all a big right (in full compliance)

Small traders refused to accept, and I do not believe you it was all a big sent a everysmall boy to check

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

//false
复制代码

everyPerform a For each element callback, so until it finds a callbackreturn falseelement (not so large potatoes), returns false, also did not return until the iteration completes false, then returnstrue

Customer: I'm a big potatoes (a line with the return)

To a customer, I want a big potato findvolunteered, I went to him

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

//{ id: '1003', weight: 120 }
复制代码

findAnd someis very similar, are looking for qualified, but you can have a somego in a circle back to collecting reported a "yes" ( true), and findput the potatoes that hold out (return to first meet the target criteria)

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

The cashier sold ready to record it

"? Hey, this is the first of several potato warehouse," findhe said: "Oh I patronize hold the potatoes, and did not see the first few"

"You thoughtless, I knew to let findIndexgo with you."

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

//2
复制代码

When you need to know the index of the required elements, you can usefindIndex

findIndexReturns the first qualifying index number

Boss: How to harvest this year, it (recursively accumulate)

Speaking in the end do not know how to harvest this year, and who better in math on the table plus one plus the weight of the potatoes

reduceHe said: That may not be what I

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

//460
//并不会改变原表格
复制代码

reduce () method takes a callback function as the first argument, and the callback function accepts four parameters, namely,;
. 1, previousValue => the initial value of a value of a function callback or superimposed;
2, currentValue => The callback ( cycle) the value to be executed;
. 3, index => "currentValue" index value;
. 4, ARR => array itself;
the reduce () method returns the last call callback return value;

It can be so

  var sum = potatos.reduce((sum, p) => 
  { return p.weight + sum },0)
  
  //460
复制代码

reduceIn fact, the ability to more than that, here you can know the basic usage

to sum up

In the potato body, we learned the basic scenario of these methods, there are some higher-order usage, such as mentioned above reduce, can be used flat array, the array deduplication, etc., later more in-depth research and presentation

I hope this article helps to distinguish between these methods ~

Reproduced in: https: //juejin.im/post/5d08467fe51d451063431814