JavaScript forEach遍历对象数组异常：新数组元素值全部相同

你猜的不对哦，这不是作用域问题，核心问题出在对象引用上！

看你的代码：c.push(Object.assign(a, {...item}))，这里Object.assign的第一个参数是目标对象a——也就是说，你每次遍历都在修改同一个a对象，把当前item的foo属性覆盖到a上。而你推到数组c里的，都是a这个对象的引用，不是新对象。所以最后数组里的三个元素其实指向的是同一个内存地址的对象，自然显示的都是最后一次修改后的foo: 'foo'。

修复方案有两种，都很简单： #

方案1：每次创建新对象作为合并目标

把Object.assign的第一个参数改成空对象，先合并a的属性，再合并当前item的属性，这样每次都会生成一个全新的对象：

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]
let c = [];
b.forEach((item) => {
  c.push(Object.assign({}, a, item));
});

方案2：用对象展开语法+map更简洁

既然是要生成新数组，用map比forEach更贴合场景，配合展开语法一行搞定：

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]
const c = b.map(item => ({ ...a, ...item }));

两种方法得到的结果都是你期望的：

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

这样数组里的每个元素都是独立的对象，互相不会影响啦～

内容的提问来源于stack exchange，提问作者Shawn Northrop