我可以有两个具有相同属性名称的对象吗？ [复制]答案

【问题标题】：can i have two objects with the same property names? [duplicate]我可以有两个具有相同属性名称的对象吗？ [复制]
【发布时间】：2016-04-04 21:24:42
【问题描述】：

每当我尝试更改数组 y 中的第一个对象时，我数组中的所有其他对象 y 属性也会更改，有没有办法防止这种情况发生，或者有办法将多个对象添加到共享相同的数组中特性？我一直在尝试解决这个问题（我正在创建一个使用类似数组进行子弹射击的游戏，每当我更改数组中第一项的 y 属性时，数组中的所有其他 y 属性都会随之更改）并且我认为这可能是问题所在？

var obj = {x:30,y:20};
var arr = [];
for(var i = 0;i<3;i++) {
arr.push(obj);
}
arr[0].y = 40;
document.write(arr[0].y + " " + arr[1].y);

【问题讨论】：

数组中的每个索引都包含对同一对象的引用 - 因此更改一个索引中的值将对所有索引生效。

标签： javascript html

【解决方案1】：

您可以通过在 .push() 中定义一个对象来解决此问题。

这将为数组的每个元素创建一个新对象，而不是包含对同一对象的多个引用的数组。

var arr = [];
for(var i = 0;i<3;i++) {
arr.push({x:30, y:20});
}
arr[0].y = 40;
document.write(arr[0].y + " " + arr[1].y);

【讨论】：

【解决方案2】：

在 JavaScript 中，对象作为指向对象内部值的指针存储在内存中。这与原始数据类型（int、char 等）的方式不同

显示这一点的一个好方法是尝试打印出对象，而不是打印出 int:

HTML:

<div id="anelementhere"></div>
<div id="anotherelementhere"></div>

JS：

var x = 5;
var obj = {x:30,y:20};
document.getElementById("anelementhere").innerHTML = x;
document.getElementById("anotherelementhere").innerHTML = obj;

JSFiddle：https://jsfiddle.net/d3ohpqqp/

您应该能够看到类似于：

5
[object Object]

现在，知道了这一点，数组中存储的不是{{x:30, y:20}, {x:30, y:20}, {x:30, y:20}}，而是{[object Object], [object Object], [object Object]}，它们都指向ONE {x:30, y:20}

这就是使所有y 属性在更改后更改的原因。正如@IrkenVader 所示，现在一个简单的解决方案是在将对象放入数组时对其进行初始化。

但是，如果由于某种原因您仍然希望原始对象位于数组之外，这是另一种解决方案：

var obj = {x:30,y:20};
var arr = [];
for(var i = 0;i<3;i++) {
    arr.push({x:obj.x, y:obj.y});
}
arr[0].y = 40;
document.write(arr[0].y + " " + arr[1].y);

JSFiddle：https://jsfiddle.net/9gzyr38x/

【讨论】：

【解决方案3】：

您正在创建一个 obj 并在您的数组中传递对同一对象的引用 4 次

您可以尝试在每次迭代中创建新对象：

var arr = [];
for(var i = 0;i<3;i++) {
  arr.push({x:30,y:20});
}
arr[0].y = 40;
document.write(arr[0].y + " " + arr[1].y);

您还可以查找“克隆”对象的各种方法。 angular、jquery 和 underscore 都提供了这样做的方法，或者你可以查看How to clone js object?

【讨论】：

3 次* - 我敢肯定这就是你的意思 :)
@Plato：很酷，但 IrkenInvader 用第一个建议击败了你 2 分钟。
啊，是的，我个人尝试总是在 for 循环中使用

【解决方案4】：

除了@IrkenInvader 给出的答案，你还可以使用jQuery to very easily perform a deep-copy 对象：

var obj = {x: 30, y: 20};
var arr = [];
for(var i  = 0; i < 3; i++) {
  arr.push(jQuery.extend(true, {}, obj));
}

arr[0].y = 40;
document.write(arr[0].y + " " + arr[1].y);

【讨论】：