JavaScript动态创建对象数组时如何避免元素引用同一对象？

JavaScript 中对象属于引用类型，你当前代码在全局作用域仅创建了1个results对象，每次执行finalResults[counter] = results时，存入数组的并不是对象的副本，而是这个对象的内存地址引用。所有数组元素都指向同一块内存空间，后续修改results的属性时，所有引用这个地址的数组元素自然会同步变更，最终数组里看起来全是同一个对象。

核心逻辑：每次向数组写入数据时，都创建一个全新的独立对象，不要复用全局作用域下的同一个results对象。

写法1：函数内直接创建新对象（最适配当前场景） #

直接把对象声明移到send函数内部，每次触发点击时都会生成独立的新对象，不会互相影响：

var randomCode = []
var fligthRange = []
var maintenanceArr = []
var finalResults = [] // 存储独立对象的结果数组
var counter = 0

function send(){ // 页面按钮点击触发的函数
  // 每次调用都生成全新的独立对象
  var results = {
    ID: randomCode[counter],
    range: fligthRange[counter],
    maintenance: maintenanceArr[counter]
  }
  finalResults[counter] = results
  counter++
}

写法2：基于模板对象拷贝生成新对象 #

如果你需要保留外部的对象模板做复用，可以用浅拷贝基于模板生成新对象，再赋值属性。你的场景下对象属性全是基础类型值，浅拷贝完全满足需求：

var randomCode = []
var fligthRange = []
var maintenanceArr = []
// 仅作为模板使用，不直接修改它
var resultTemplate = {ID: '', range: '', maintenance: ''}
var finalResults = []
var counter = 0

function send(){
  // 基于模板生成全新的拷贝对象
  var results = {...resultTemplate}
  results.ID = randomCode[counter]
  results.range = fligthRange[counter]
  results.maintenance = maintenanceArr[counter]
  finalResults[counter] = results
  counter++
}

注意：如果后续对象属性中存在嵌套的对象、数组等引用类型值，浅拷贝无法实现完全独立，需要额外做深拷贝处理，当前场景不需要。

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