Array數組對象的forEach、map、filter、reduce

zhigoo 發布于2019-08-23 10:36 / 838人閱讀

摘要：語法參數回調當前的當前的索引值這個數組對象回調的指向返回值類型符合條件的值組成的數組用法如果返回值是的話，就是符合條件。

剛才某人問了我一個問題。map怎么遍歷，我刷刷刷就是一頓寫。遍歷么，forEach么，妥妥的。

var map = new Map();
map.set("item1", "value1")
map.set("item2", "value2")
map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

好吧，我寫完了之后，他發給我了一句話。[].forEach()改成[].map()怎么用？

what?我這個暴脾氣。。。。我當然是詳細的說一下Array的常規遍歷方法以及場景了。

Array.filter 語法

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

}, this)

參數

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

返回值

Array 類型
//符合條件的值組成的數組

用法

//如果返回值是true的話，就是符合條件。
//filter 不會改變原數組，它返回過濾后的新數組。
//這個里返回數組里面的偶數
[10,11,12,13].filter((v)=>v % 2 == 0)
//只要審核通過的。當然正常情況下，對象比這個復雜一些。
[{state:1},{state:0},{state:0},{state:0}].filter((v)=>v.state == 1)
//只要成年人，記錄是有效的
[{age:18,state:1},{age:16,state:0},{age:21,state:0}].filter((v)=>v.state == 1 && v.age > 17)

場景

場景就是過濾，把符合條件的整理到一起，常見的就是展示審核通過的數據，只顯示關注我的人，只顯示妹子，對吧糙漢子就過濾不看了。

Array.forEach 語法

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

}, this)

參數

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

返回值

undefined
// 這個東西沒有返回值

用法

//遍歷數組。打印到控制臺
[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)
    }
})
// 給20歲的小姐姐打招呼
[{state:1,age: 1},{state:0,age: 20},{state:0,age: 19},{state:0,age: 31}].forEach((v)=>{
    if(v.age == 20){
        console.log("你好啊，我今年正好80")
    }
})

場景

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

Array.map 語法

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

}, this)

參數

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

返回值

array 數組
// 每個回調的返回值組成的新數組

用法

//把數值格式化，保留兩位小數
[10.055,11.054,12.056,13.789].map((v)=>+v.toFixed(2))

場景

這個一般就用在，我需要一組值，但是這個值不對，需要計算原數組來生成。

Array.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)

場景

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

對比

forEach沒有返回值，重點是function里面處理邏輯
map有返回值，重點是function返回值，組成新數組
filter有返回值，重點是function返回值，過濾之后組成新數組
reduce有返回值，重點是計算數組，返回一個值

昨天晚上下班著急跑路，還差一些例子沒往上整理，今天補上

例子

大家可以嘗試寫寫，有好的例子能更好的說明函數的作用也可以在評論區提出來，有好的解決方案也可以寫出來。

有一組用戶信息按手機號降序排序，輸出用戶名稱，用逗號分隔

[{name: "l1", phone: "1507539"},{name: "l2", phone: "1507540"},{name: "l3", phone: "1507541"},{name: "l4", phone: "1507538"}]
 .sort((n,m)=>n.phonem.name)
 .join(",")

給元素綁事件

 [].slice.call(document.querySelectorAll("div"))
  .forEach(v=>v.addEventListener("click",e=>console.log(e.target.className)))

獲取所有元素的class,過濾空串

[].slice.call(document.querySelectorAll("*"))
 .map(v=>v.className)
 .filter(v=>v)

GPU云服務器云服務器 array_reduce map-reduce array_filter()函數 array_map

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

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

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

摘要：不會改變原數組，它返回過濾后的新數組。打印到控制臺成功的收集到里面錯誤的收集到里面。語法參數回調當前的當前的索引值這個數組對象回調的指向用法場景這個一般就用在，判斷數組的每個元素是否符合條件。首先是函數概述：map():返回一個新的Array，每個元素為調用func的結果 filter():返回一個符合func條件的元素數組 some():返回一個boolean，判斷是否有元素是否符...

CocoaChina 2019-08-26 12:11 評論0 收藏0
JS中ArrayAPI學習筆記

摘要：如果該函數的返回值大于，表示第一個成員排在第二個成員后面其他情況下，都是第一個元素排在第二個元素前面。第三次執行，為上一輪的返回值，為第四個成員。第四次執行，為上一輪返回值，為第五個成員。 JS中ArrayAPI學習筆記記博客,時常回顧.尤其是面試之先回顧阮一峰標準庫Array對象 1 一些標準庫回顧 showImg(https://segmentfault.com/img/remo...

tolerious 2019-08-22 17:32 評論0 收藏0
Array和常用API

摘要：返回值自寫一下函數這就是一個簡單的自寫的一個函數，代表操作的數組，代表用來操作數組的函數，傳入數組和函數。返回值返回排序后的數組。分隔符指定一個字符串來分隔數組的每個元素。生成新數組元素的函數，使用三個參數。什么是數組在阮一峰的《JavaScript 標準參考教程（alpha）》中的解釋是：數組（array）是按次序排列的一組值。每個值的位置都有編號（從0開始），整個數組用方括號表...

coordinate35 2019-08-22 18:41 評論0 收藏0
JavaScript30秒，從入門到放棄之Array（四）

摘要：使用把指定運算結果為的數組元素添加到二維數組的第一個數組中，運算結果為的數組元素添加到二維數組的第二個數組中。所以改成了，它是不改變數組元素的，沒有副作用，不干擾后續。方法將剩余的所有數組元素以的方式返回結果數組。原文地址：JavaScript30秒，從入門到放棄之Array（四）博客地址：JavaScript30秒，從入門到放棄之Array（四）水平有限，歡迎批評指正 ma...

wuaiqiu 2019-08-22 13:56 評論0 收藏0
Array對象

摘要：上面代碼通過方法的第二個參數，將回調函數內部的對象，指向數組。第三次執行，為上一輪的返回值，為第四個成員。第四次執行，為上一輪返回值，為第五個成員。 Array 對象構造函數靜態方法Array.isArray()實例方法valueOf()，toString()push()，pop()shift()，unshift()join(分隔符)返回字符串concat()新的reverse()s...

loostudy 2019-08-26 10:18 評論0 收藏0