JavaScript向数组推入对象数据异常问题求助

问题根源 #

你在循环外部仅创建了一个mapOption对象，每次循环只是修改该对象的属性值，然后将同一个对象的引用推入数组。由于数组中所有元素指向的都是内存中的同一个对象，当你最后一次修改mapOption.center为2时，数组里的所有元素都会同步显示这个最新值，导致第一个元素的center值被覆盖。

解决方法 #

方法1：在循环内部创建新对象

每次循环都生成一个全新的对象，确保数组中的每个元素都是独立的引用：

let mapOptions = []
let averagelist = [1, 2]

for (let i = 0; i < averagelist.length; i++) {
    let mapOption = {} // 每次循环创建新对象
    mapOption.center = averagelist[i]
    mapOption.level = 3
    mapOptions.push(mapOption)
    console.log(mapOptions)
}

方法2：使用对象展开语法生成副本

通过展开语法{...mapOption}创建原对象的浅拷贝，将副本推入数组，避免引用同一个对象：

let mapOptions = []
let mapOption = {}
let averagelist = [1, 2]

for (let i = 0; i < averagelist.length; i++) {
    mapOption.center = averagelist[i]
    mapOption.level = 3
    mapOptions.push({...mapOption}) // 推入对象副本
    console.log(mapOptions)
}

两种方法都能让你得到期望的结果：[{"center":1,"level":3},{"center":2,"level":3}]

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