Javascript / ES6 forEach Issue
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript / ES6 forEach Issue相关的知识，希望对你有一定的参考价值。
我试图循环Array的Objects，修改每个Object，并将结果推入新的Array。
数组中的Objects具有不同的值。当我检查得到的Array时，所有的Objects都具有相同的值。它们都反映了原始Object中的最后一个Array
例如：
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' }
]
我试图循环一个对象数组，修改每个对象，并将结果推送到一个新的数组。
听起来像你想要的是.map，而不是.forEach。
当我检查结果数组时，所有对象都具有相同的值。它们都反映了原始Array中的最后一个Object
这是因为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的工作方式：它修改目标并返回它，它不会创建新对象。您的所有结果都会引用您作为目标传递的a。
您正在寻找
const c = b.map(item => ({...a, ...item})); // with object spread syntax
要么
const c = b.map(item => Object.assign({}, a, item)); // with Object.assign
b.forEach((item) => {
c.push(Object.assign(a, {...item} ));
});
不是{...b}，必须是{...item}
问题是你的{...b} - 当你只想复制你正在迭代的项目的属性时，你正在复制b中对象的所有属性。
const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]
const c = [];
b.forEach((item) => {
c.push(Object.assign(item, a));
});
console.log(c);Object.assign，此函数将使您的对象更改，并返回对象a的引用。
这意味着，您更改对象a并在每个循环中将其引用推送到数组c。
最后，您将获得包含对象a的三个引用的数组c。这一刻，a是{foo：'foo'，choo：'choo'}。
怎么解决？
关键是，在每个循环中推送对数组c的不同引用。
const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]
let c = [];
b.forEach((item) => {
c.push(Object.assign({}, a, item ));
});
以上是关于Javascript / ES6 forEach Issue的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript：在forEach里面return没有效果
JavaScript：在forEach里面return没有效果