生動形象解釋forEach、filter、map、some、every、find、findIndex

Luosunce 發布于2019-08-23 16:51 / 3083人閱讀

摘要：前言從最開始學的循環遍歷方法，到后來層出不窮的各種遍歷方法，其實最大的區別就是應用場景的不同。我們最需要記住的就是，什么情況下用哪一種方法比較合適。

前言

從最開始學的for循環遍歷方法，到后來層出不窮的各種遍歷方法，其實最大的區別就是應用場景的不同。
我們最需要記住的就是，什么情況下用哪一種方法比較合適。

從挑土豆開始

這里有一堆土豆，如果換成代碼，可以表示如下：

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 }]

同時把上面的重量（g）記錄成一個數組

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

農民：我要催熟（批量操作）

我們希望把這一批土豆全部催熟一下，進行增重
可以用到forEach方法

potatos.forEach(potato => { potato.weight += 20 })

map方法說：我也可以！

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

map補充了一句，我還可以把重量統計表格，更新出一份新的給你

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

//[ 70, 100, 140, 60, 130, 80 ]

forEach和map的最大區別就在于，forEach沒有返回值。
即便你給forEach加上return也沒用

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

老板：我只要大土豆（篩選過濾）

filter是濾波的意思
從名字上看，就知道篩選過濾這樣的活是filter來干的

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

//[ { id: "1003", weight: 120 }, { id: "1005", weight: 110 } ]

返回一個新的對象數組，并不會改變原數組

商販：你這有沒有大的啊（有符合）

旁邊的小商販嘲笑我們說，我們這都是小土豆，不中用的
那不得找一個巨無霸給他看看

當只需要判斷數組中有沒有符合條件的時候（一個就行）
就需要我們的some方法登場了

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

//true

我們的some小伙計，去土豆存放的倉庫進行尋找，只要找到一個符合條件的，就回來報告true
所以并不會全部遍歷，不做多余的活（性能優良）

商販：難道全都是大的嗎（全符合）

小商販不服了，我不信你這全是大的
派了個every小伙計去檢查

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

//false

every因為要檢查所有元素是否都符合條件，所以性能比較差
因此一些簡單的情況，可以反向檢查
比如這一例，可以換成用some檢查是否有小個的，再將結果取反，就可以減少遍歷，節省性能

var allbig=!potatos.some(potato => { return potato.weight <= 100 })

//false

顧客：給我個大土豆（返回一個符合的）

來了一個顧客，想要一個大土豆
find自告奮勇，我去找給他

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

//{ id: "1003", weight: 120 }

find和some很類似，都是尋找符合條件的，有一個就可以
不過some進去搜羅了一圈回來報了個“有”（true），而find則把那個土豆抱了出來（返回第一個符合條件的對象）

收銀員：這土豆是倉庫的第幾個來著（返回序號）

收銀員賣完準備記錄一下

“哎，這土豆是倉庫的第幾個？”
find說：“哎呀我光顧著抱土豆了，沒看是第幾個”

“你這粗心鬼，早知道讓findIndex跟你一起去了”

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

//2

當需要知道所需元素的索引，就可以用findIndex

findIndex返回第一個符合條件的索引號

老板：今年收成如何呀（遞歸累加）

說起來還不知道今年收成到底怎么樣呢
誰數學好把表格上那些土豆重量加一加
reduce說：那不得我來么

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

//460
//并不會改變原表格

reduce()方法接收一個回調函數作為第一個參數，回調函數又接受四個參數，分別是： 
1、previousValue =>初始值或上一次回調函數疊加的值； 
2、currentValue => 本次回調（循環）將要執行的值； 
3、index=>“currentValue”的索引值； 
4、arr => 數組本身； 
reduce()方法返回的是最后一次調用回調函數的返回值；

也可以這樣

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

reduce能力其實不止于此，這里知道基本用法即可

總結

在土豆身上，我們學會了這些方法的基本應用場景，還有一些高階用法，比如上面提到的reduce，可以用來扁平數組，數組去重等等，以后再進行更深入的研究與介紹
希望這篇文章對大家區分這些方法有所幫助~

云服務器 GPU云服務器 findIndex every some() some

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103406.html

JavaScript數組迭代（遍歷）方法

摘要：正文和中新增的的數組迭代方法如下其中，是新增的，其余都是新增的。指數組后，返回過濾后的新數組。它的參數跟方法是一樣的所有數組成員依次執行回調函數，直到找出第一個返回值為的成員，然后返回該成員。前言 ES5和ES6中新增了不少東西，對于數組而言，新增了不少迭代方法，讓我們可以拋棄for循環，更方便的寫JS代碼。正文 ES5和ES6中新增的的數組迭代方法如下： forEach map...

light 2019-08-20 17:34 評論0 收藏0
forEach、map、filter、find、sort、some等易錯點整理

摘要：最近手頭上做了一個很大的后臺管理項目，前端對復雜數據的處理要求頗高，也確實讓自己發現了很多之前被忽視的細節。鳴人佐助卡卡西佐助佐助佐助但是很遺憾及更早版本也不支持。 ??最近手頭上做了一個很大的后臺管理項目，前端對復雜數據的處理要求頗高，也確實讓自己發現了很多之前被忽視的細節。在此特整理出來，希望不熟悉的朋友們們以后可以繞開我踩的這些坑。本文初衷在于幫助大家梳理一些數組操作上的重點和易...

AJie 2019-08-23 16:50 評論0 收藏0
數組常見的遍歷循環方法、數組的循環遍歷的效率對比

摘要：場景檢查數組中是否含有某個東西和是對立的案例案例是否包含為對象循環遍歷效率對比參考參考原生實現等方法其他參考 1 遍歷數組的方法 1-1、for / while 最普通的循環效率最高兼容ie6tips:for循環更適用于循環的開始和結束已知，循環次數固定的場合；while循環更適合于條件不確定的場合 1-2、for in 兼容ie6，效率最差（效率可看最下面的對比） for in...

xfee 2019-08-23 15:14 評論0 收藏0
數組空位元素的處理

之前看到知乎上的這道題：如何不使用loop循環，創建一個長度為100的數組，并且每個元素的值等于它的下標？，在這個問題里面題主提到，他寫了這么一段代碼： use strict let arr = Array(100).map( (item,idx) => idx) 結果arr是一個有100個空位的數組:showImg(https://segmentfault.com/img/bVtNMu);這說...

Yujiaao 2019-08-19 17:56 評論0 收藏0
javaScript數組遍歷方法總結

摘要：首次調用回調函數時，和可以是兩個值之一。否則返回張三男王小毛男李四男李四返回結果為李四男方法李四對于數組中的每個元素，方法都會調用一次回調函數采用升序索引順序，直到有元素返回。數組遍歷方法 1.for循環使用臨時變量，將長度緩存起來，避免重復獲取數組長度，當數組較大時優化效果才會比較明顯。 for(var j = 0,j < arr.length;j++) { //執行代碼 ...

shiguibiao 2019-08-26 10:39 評論0 收藏0