Javascript/ES6 forEach 问题

Question

我正在尝试循环遍历对象的数组，修改每个对象，并将结果推送到新的数组中.

数组中的对象具有不同的值。当我检查生成的数组时，所有对象都具有相同的值。它们都反射(reflect)了原始Array中的最后一个Object

例如:

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

let c = [];
b.forEach((item) => {
  c.push(Object.assign(a, {...item} ));
});

c的结果:

[ 
  { foo: 'foo', choo: 'choo' }, 
  { foo: 'foo', choo: 'choo' }, 
  { foo: 'foo', choo: 'choo' } 
]

我认为这是某种范围问题，但我不确定如何解决它。

预期结果是

[
  { foo: 'bar', choo: 'choo' }, 
  { foo: 'baz', choo: 'choo' }, 
  { foo: 'foo', choo: 'choo' } 
]

Answer 1

I am trying to loop through an Array of Objects, modify each Object, and push the result into a new Array.

听起来你想要的是 .map ，不是.forEach .

When I examine the resulting Array all of the Objects all have the same value. They all reflect the last Object in the original Array

这是因为Object.assign 修改一个对象。您正在修改a多次并创建一个包含多次引用 a 的数组.

答案是将一个空对象作为第一个参数传递给 Object.assign (并使用 map )。使用{...item}也没有意义，所以我将其替换为 item :

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

const c = b.map((item) => Object.assign({}, a, item));

console.log(c);

编辑:如果您确实想要修改原始对象，可以通过将参数的顺序更改为 Object.assign 来实现。这样item是第一。但我不推荐这样做:

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

const c = b.map((item) => Object.assign(item, a));

console.log(c);
console.log(b);