Aray配列オブジェクト中のforEach、map、filter及びreduce詳細分析

前言
先ほどある人が私に質問しました。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この怒り。。。。。。もちろん詳細にはArayの慣行遍歴方法とシーンを説明します。
Aray.filter
構文

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

}, this)

パラメータ
calbackコールバック
    element現在のvalue
    index   現在の索引の値
    array   arrという配列のオブジェクト
thisフィードバックのthis方向
戻り値
Arayタイプ
//条件に合う値からなる配列
使い方

//      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)

シーン
シーンはフィルタリングです。条件に合ったデータをまとめて見ると、よくあるのは審査の通りのデータを見せてくれます。私に関心を持っている人だけが表示されます。妹だけが表示されますよね。
Aray.forEach
構文

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

}, this)

パラメータ
calbackコールバック
    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')
 }
})

シーン
例えば、バインディングイベントは、判定値を押してから別の場所にプッシュします。
Aray.map
構文

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

}, this)

パラメータ
calbackコールバック
    element現在のvalue
    index   現在の索引の値
    array   arrという配列のオブジェクト
thisフィードバックのthis方向
戻り値
array配列
//各コールバックの戻り値からなる新しい配列
使い方

//      ，      
[10.055,11.054,12.056,13.789].map((v)=>+v.toFixed(2))

シーン
これは一般的に使われています。値のセットが必要ですが、この値は正しくないので、元の配列を計算して生成します。
Aray.reduce
構文

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

}, initialValue)

パラメータ
calbackコールバック
    sum     アキュムレータの戻り値、つまり前回の反転の戻り値です。
    element現在のvalue
    index   現在の索引の値
    array   arrという配列のオブジェクト
initial Valueが最初に入ってきた値は、フィードバックなしで下付き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.phone<m.phone)
 .map(m=>m.name)
 .join(',')

元素にイベントを縛る

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

すべての要素のクラスを取得して、空の列をフィルタします。

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

締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。