js數組方法forEach、map、filter、reduce、every、some總結

CocoaChina 發(fā)布于2019-08-26 12:11 / 3169人閱讀

摘要：不會改變原數組，它返回過濾后的新數組。打印到控制臺成功的收集到里面錯誤的收集到里面。語法參數回調當前的當前的索引值這個數組對象回調的指向用法場景這個一般就用在，判斷數組的每個元素是否符合條件。

首先是函數概述：
map():返回一個新的Array，每個元素為調用func的結果
filter():返回一個符合func條件的元素數組
some():返回一個boolean，判斷是否有元素是否符合func條件
every():返回一個boolean，判斷每個元素是否符合func條件
forEach():沒有返回值，只是針對每個元素調用func
reduce():有返回值，重點是計算數組，返回一個值
其次
1、map速度比forEach快
2、map會返回一個新數組，不對原數組產生影響,foreach不會產生新數組，
3、map因為返回數組所以可以鏈式操作，forEach不能

filter
語法

var new_arr = arr.filter(callback(element, index, array){
}, this)

參數：callback 回調

 element 當前的value
 index   當前的索引值
 array   arr這個數組對象
 this 回調的this指向

用法
//如果返回值是true的話，就是符合條件。
//filter 不會改變原數組，它返回過濾后的新數組。
//這個里返回數組里面的偶數
[10,11,12,13].filter((v)=>v % 2 == 0)
場景
場景就是過濾，把符合條件的整理到一起，常見的就是展示審核通過的數據

forEach
語法

arr.forEach(callback(element, index, array){
}, this)

參數：callback 回調

 element 當前的value
 index   當前的索引值
 array   arr這個數組對象
 this 回調的this指向

用法
//遍歷數組。打印到控制臺

[10,11,12,13].forEach((v)=>{
    console.log(v)
})

// 成功的收集到success里面,錯誤的收集到error里面。

var success = [],error = [];
[{state:1},{state:0},{state:0},{state:0}].forEach((v)=>{
    if(v.state == 1){
        success.push(v)
    }else{
        error.push(v)
    }
})

場景
比如說綁定事件，比如判斷值然后push到不同的地方

map
語法

arr.map(callback(element, index, array){ }, this)

參數：callback 回調

 element 當前的value
 index   當前的索引值
 array   arr這個數組對象
 this 回調的this指向

用法
//把數值格式化，保留兩位小數
[10.055,11.054,12.056,13.789].map((v)=>+v.toFixed(2))
場景
這個一般就用在，我需要一組值，但是這個值不對，需要計算原數組來生成。

reduce
語法

arr.reduce(callback(accumulator, element, index, array){
}, initialValue)

參數：callback 回調
sum 累加器的返回值，也就是上一次回調的返回值 element 當前的value index 當前的索引值 array arr這個數組對象 initialValue 初始傳入的值，如果不傳回調從下標1開始，下標0作為初始值
用法
//累加

[10,11,12,13].reduce((s,v)=>s+v,0)

場景
這個計算整個數組得出一個值的

some
語法

arr.some(callback(element, index, array){
}, this)

參數：callback 回調

 element 當前的value
 index   當前的索引值
 array   arr這個數組對象
 this 回調的this指向

用法

initArray = initArray.some(item => { if (item === 1){ return true } return false })

場景
這個一般就用在，判斷數組里是否有某個值。

every
語法

arr.every(callback(element, index, array){
}, this)

參數：callback 回調

 element 當前的value
 index   當前的索引值
 array   arr這個數組對象
 this 回調的this指向

用法

initArray = initArray.every(item => { if (item === 1){ return true } return false })

場景
這個一般就用在，判斷數組的每個元素是否符合func條件。

GPU云服務器云服務器數組方法reduce js數組遍歷foreach map-reduce js 傳遞map數組

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

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

js之靈活使用可遍歷數組的API

摘要：總結遍歷數組的時候應該盡量使用這些，靈活運用可以讓代碼更加優(yōu)雅，這種盡可能使用函數和鏈式調用的風格很接近函數式編程，可以提高代碼質量。 js中有很多可以遍歷數組的API，既然已經封裝的這么好，為什么不在平常開發(fā)的時候使用，本文講講forEach、map、filter、some、every、reduce這些API的使用，并且和普通的for語句作對比。我們以一個對象數組作為測試數據： c...

sutaking 2019-08-22 14:05 評論0 收藏0
生動形象解釋forEach、filter、map、some、every、find、findIndex

摘要：前言從最開始學的循環(huán)遍歷方法，到后來層出不窮的各種遍歷方法，其實最大的區(qū)別就是應用場景的不同。我們最需要記住的就是，什么情況下用哪一種方法比較合適。前言從最開始學的for循環(huán)遍歷方法，到后來層出不窮的各種遍歷方法，其實最大的區(qū)別就是應用場景的不同。我們最需要記住的就是，什么情況下用哪一種方法比較合適。從挑土豆開始 showImg(https://segmentfault.com/...

Luosunce 2019-08-23 16:51 評論0 收藏0
關于JS循環(huán)遍歷

摘要：關于循環(huán)遍歷寫下這篇文章的目的，主要是想總結一下關于對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。的作用主要是去遍歷對象的可枚舉屬性。例如索引，數值打印結果為當第二項不滿足條件式跳出循環(huán)，返回。關于JS循環(huán)遍歷寫下這篇文章的目的，主要是想總結一下關于JS對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。本文會主要介紹：while,for,forEac...

eternalshallow 2019-08-21 11:38 評論0 收藏0
ES5新增數組操作forEach()、map()、filter()、some()、every()

摘要：方法，還有一個特性，當缺省或是為，和方法一樣，通常我用對數組的每個元素進行一定操作映射后，會返回一個新的數組該方法對數組中的每一項運行給定函數。 1. 前言 ES5中新增的一些處理數組（Array）的方法，對于用JavaScript處理數據非常有用。我總結了一下，給這些方法分了類，大體如下： 2個索引方法：indexOf() 和 lastIndexOf()； 5個迭代方法：forEa...

13651657101 2019-08-20 15:53 評論0 收藏0