forEach、for、mapの違い

マップメソッド

 //值类型，不改变原数组，形成新的数组
 let valueArr = [11, 22, 33];
 let newArray = valueArr.map(item => item * 2);
 console.log(valueArr, newArray);  //[11,22,33]   [22,44,66]
 
 //引用类型，改变原数组
 let referArr = [{
    
     width: 100 }, {
    
     width: 200 }];
 referArr.map(item => item.editable = true);   
 console.log(referArr)  //[{width:100,editable:true},{width:200,eidtable:true}]

forEachメソッド

 //值类型，不改变原数组，返回值undefined
 let valueArr = [11, 22, 33];
 let newArray = valueArr.forEach(item => item * 2);
 console.log(valueArr, newArray);  //[11,22,33]   undefined
 
 //若要改变值,则需配合index来使用
 let newArr1 = valueArr.forEach((item, index) => {
    
    
      valueArr[index] = item * 2;
 });
 console.log(valueArr, newArray);  //[22,44,66]   undefined
  
 //引用类型，改变原数组
 let referArr = [{
    
     width: 100 }, {
    
     width: 200 }];
 referArr.forEach(item => item.editable = true);   
 console.log(referArr)  //[{width:100,editable:true},{width:200,eidtable:true}]

注：
forEachまたはmapを使用して配列をトラバースし、returnを使用して次のステートメントを終了するかどうかに関係なく、ループでは無効です。変数は遷移値として必要ですが、forループでは有効です。

const valids = []
let flag;
this.$refs[formName].forEach((item) => {
    
    
    item.validate((valid) => {
    
    
        !valid && (flag = true)
    })
})

概要：
どちらも配列をトラバースするために使用されます。forEachとmapは、配列内の各要素に対してコールバック関数を実行します。
forループは、配列の長さを決定し、現在のループを終了し続け、中断してループ全体を終了するために使用されます。
mapメソッドは連鎖プログラミングできますが、戻り値が必要です。
map：配列の型が値型の場合、新しい配列が生成されます。配列の型が参照型の場合、元の配列が変更されます。
forEachの基本原則はforループであり、戻り値は未定義です。
forEach：配列の型が値型の場合、元の配列は変更されません。元の配列を変更する場合は、インデックスパラメータを使用して変更します。配列の型が参照型の場合、元の配列は変更されます。配列が変更されます

おすすめ