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

更新

期望的结果：

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

Answer 1

您还必须复制内部对象，替换此

const eachArr = [...schema];

用这个

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

Answer 2

在为schema分配值之前，您可以使用Object.assign映射新对象。

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么以下日志记录不同的值（数组循环）？

2 个答案: