数组对象在JavaScript中只显示每个索引的最终数据

Question

我正在Javascript中创建一个对象数组。对象数据正在for循环中动态生成。

当您运行这段代码时，您将看到控制台日志中生成的最终数组对于每个索引都是相同的数据。

我是Javascript新手，但我确实有c++， Python, VBA等数组的经验。

我知道还有其他类型的循环数组，如ForEach，和映射，但是这看起来应该是非常简单的，但我不知道我错过了什么。

const test_data = {
value: 0,
value2: 0
};
let number = 10;
let test_array = [];
let temp = test_data;
for (let i = 0; i < number; i++) {
//i realize using a temp object is a little redundant
//being that i could just say test_array[i].value = ***
//i get the same results either way.
temp.value = 500 * (i + 1);
temp.value2 = temp.value * 100;
test_array.push(test_data);
test_array[i] = temp;
console.log(temp);
console.log(test_array[i]);
console.log(test_array);
}
console.log(test_array);

Answer 1

对象在JS中是通过引用传递的，所以在你的代码中，每次迭代你都在修改相同的对象，并在你的数组中添加一个链接。

无论何时将temp对象添加到数组中，您都必须创建它的副本，或者，由于您修改了所有属性，因此在添加它之前创建一个新对象并设置它。

let number = 10;
let test_array = [];
for (let i = 0; i < number; i++) {
const temp = {};
temp.value = 500 * (i + 1);
temp.value2 = temp.value * 100;
test_array.push(temp);
}
console.log(test_array);

---

或者如果你想从原始创建副本(因为有其他数据你想保留)

const test_data = {
value: 0,
value2: 0,
common_data: 'some common value'
};
let number = 10;
let test_array = [];
for (let i = 0; i < number; i++) {
// create shallow copy
const temp = {...test_data};

temp.value = 500 * (i + 1);
temp.value2 = temp.value * 100;
test_array.push(temp);
}
console.log(test_array);

---

最后，如果您想创建副本，并且test_data中包含其他对象，则可能需要执行深度复制

Answer 2

正如@Stephen Quan在他的评论中提到的，你有多个引用和对同一个对象的引用。

要解决这个问题，可以使用扩展操作符来创建对象的新副本。

for (let i = 0; i < number; i++) {
let temp = test_data;
temp.value = 500 * (i + 1);
temp.value2 = temp.value * 100;
test_array[i] = {...temp};
}

Answer 3

检查这是否是您正在寻找的

const test_data = {
value: 0,
value2: 0
};
const start = 1;
const end = 10;
const number = [...Array(end - start + 1).keys()].map(x => x + start);
const test_array = number.map((_, index) => {
let value = 500 * (index + 1);
let value2 = value * 100;
return {value, value2};
});
console.log(test_array);

输出:

[
{
"value": 500,
"value2": 50000
},
{
"value": 1000,
"value2": 100000
},
{
"value": 1500,
"value2": 150000
},
{
"value": 2000,
"value2": 200000
},
{
"value": 2500,
"value2": 250000
},
{
"value": 3000,
"value2": 300000
},
{
"value": 3500,
"value2": 350000
},
{
"value": 4000,
"value2": 400000
},
{
"value": 4500,
"value2": 450000
},
{
"value": 5000,
"value2": 500000
}
]