向JavaScript对象添加多个元素时仅最后一个元素被加入的问题

你碰到的这个问题很典型——JavaScript里的对象是引用类型，你从头到尾都在修改同一个$scope.newMappings对象，然后多次把它push到insertList数组里。数组里存储的其实都是指向这个对象的"指针"，所以当你最后一次修改对象属性时，数组里所有的"指针"指向的都是同一个更新后的对象，看起来就像只添加了最后一个元素。

解决办法有这几种，选你觉得顺手的就行： #

1. 每次添加前创建全新的对象

直接每次初始化一个新的对象，而不是在原对象上修改：

// 第一个条目
$scope.newMappings = {
  sChannel: 'EST',
  sFormat: 'HD',
  sASIN: '',
  sLocalDescription: ''
};
insertList.push($scope.newMappings);

// 第二个条目
$scope.newMappings = {
  sChannel: 'EST',
  sFormat: 'SD',
  sASIN: '',
  sLocalDescription: ''
};
insertList.push($scope.newMappings);

2. 写个工具函数生成对象（减少重复代码）

如果要添加很多条目，写个复用的函数会更高效：

function createNewMapping(channel, format) {
  return {
    sChannel: channel,
    sFormat: format,
    sASIN: '',
    sLocalDescription: ''
  };
}

// 调用函数添加条目
insertList.push(createNewMapping('EST', 'HD'));
insertList.push(createNewMapping('EST', 'SD'));

3. 用对象复制的方式创建新实例

如果有基础的对象模板，用展开运算符或者Object.assign复制出一个新对象再修改：

// 先定义基础模板
const baseMapping = {
  sChannel: 'EST',
  sASIN: '',
  sLocalDescription: ''
};

// 复制模板并修改指定属性
insertList.push({...baseMapping, sFormat: 'HD'});
insertList.push({...baseMapping, sFormat: 'SD'});

// 或者用Object.assign的写法：
insertList.push(Object.assign({}, baseMapping, {sFormat: 'HD'}));

不管用哪种方式，核心都是每次push到数组里的是一个全新的对象引用，这样每个条目都是独立的，不会被后续的修改覆盖。

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