次のログのログ値が異なる（アレイループ）のはなぜですか？私たちが何をしたいのか

Question

がarrObjの値を持つ新しい配列（作成単一のスキーマを使用することです：何らかの理由で

const arrObj = [{ 
    id: 1, 
    title: 'aaa' 
}, { 
    id: 2, 
    title: 'bbb', 
}] 

const schema = [{ 
    name: 'id', 
    value: '' 
}, { 
    name: 'title', 
    value: '' 
}] 

const finalArrObj = [] 

arrObj.forEach(eachArrObj => { 
    const eachArr = [...schema] // copy array without pointing to the original one 
    eachArr.forEach(field => { 
    field.value = eachArrObj[field.name] 
    console.log('1: ' , field) // correct value 
    }) 
    console.log('2: ', eachArr) // the objects are all the same 
    console.log('3: ', eachArr[0].value) // the object here is correct 
    finalArrObj.push(eachArr) 
}) 

を、コンソールログ番号2の値は、同じオブジェクトの配列を記録します。コンソールのログ番号3は正しいオブジェクトをログに記録します

なぜ、この出来事とどのようにそれを修正することです

ライブ例：？https://codepen.io/sky790312/pen/KmOgdy

UPDATE：

望ましい結果：

[{ 
    name: 'id', 
    value: '1' 
}, { 
    name: 'title', 
    value: 'aaa' 
}], 
[{ 
    name: 'id', 
    value: '2' 
}, { 
    name: 'title', 
    value: 'bbb' 
}] 

Answer 1

この

const eachArr = [...schema]; 

を置き換えますを使用してオブジェクト値を割り当てる前にschemaの場合は0です。

schema.map(a => Object.assign({}, a, { value: o[a.name] })) 
       ^^^^^^^^^^^^^^^^       take empty object for 
           ^      assingning values of a and 
            ^^^^^^^^^^^^^^^^^^^^ only the value of a property 

const arrObj = [{ id: 1, title: 'aaa' }, { id: 2, title: 'bbb' }], 
 
    schema = [{ name: 'id', value: '' }, { name: 'title', value: '' }], 
 
    finalArrObj = arrObj.map(o => 
 
     schema.map(a => Object.assign({}, a, { value: o[a.name] })) 
 
    ); 
 

 
console.log(finalArrObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

あなたはまた、内部オブジェクトをコピーする必要があり、あなたが新しいをマップすることができ、この

const eachArr = schema.map((e)=>{ 
    return Object.assign({}, e); 
})