JavaScript循环生成对象数组时所有索引数据相同的问题求助

安全阿岳

2026-7-26

问题原因与解决方案

核心问题：对象的引用特性

JavaScript里的对象属于引用类型，变量存储的不是对象本身，而是指向对象内存地址的引用。你代码里的所有操作，都是在修改同一个对象：

let temp = test_data; 让temp和test_data指向内存中同一个对象
循环里修改temp.value/temp.value2，本质是在修改这个共享对象的属性
test_array.push(test_data)和test_array[i] = temp，都是把同一个对象的引用添加到数组里

所以最终数组里的所有元素，其实都是指向同一个对象的指针，自然显示的内容完全一致。

修正方案：每次循环创建新对象

要解决这个问题，必须保证每次添加到数组的是新的对象实例，每个实例拥有独立的内存空间。以下是几种可行的写法：

1. 直接创建新对象字面量（最简洁）

const number = 10;
let test_array = [];

for (let i = 0; i < number; i++) {
  const value = 500 * (i + 1);
  // 每次循环生成全新的对象
  const temp = {
    value: value,
    value2: value * 100
  };
  test_array.push(temp);
  
  console.log(temp);
  console.log(test_array[i]);
  console.log(test_array);
}

console.log(test_array);

2. 基于原始对象复制新实例

如果需要复用test_data的结构，可以用Object.assign或展开运算符复制出全新对象：

const test_data = {
  value: 0,
  value2: 0
};

const number = 10;
let test_array = [];

for (let i = 0; i < number; i++) {
  // 复制test_data生成新对象（两种写法二选一）
  // const temp = Object.assign({}, test_data);
  const temp = {...test_data};
  
  temp.value = 500 * (i + 1);
  temp.value2 = temp.value * 100;
  test_array.push(temp);
  
  console.log(temp);
  console.log(test_array[i]);
  console.log(test_array);
}

console.log(test_array);