Question

在JavaScript中，我有一个数组。我正在使用push()来添加数组元素，但是当我操作所述元素时，每个数组元素都会被更改，而只有一个元素应该被更改。我的代码是：

// Arrays to hold the elements that have been created (added to the document).
create.element_array                       = []
create.element_array["name"]               = []
create.element_array["name"]["properties"] = []

var element_properties = 
{
    // Default all to 0.
    borderTopStyle: 0, borderRightStyle: 0, borderBottomStyle: 0, borderLeftStyle: 0,
    borderTopWidth: 0, borderRightWidth: 0, borderBottomWidth: 0, borderLeftWidth: 0, 
    borderTopColor: 0, borderRightColor: 0, borderBottomColor: 0, borderLeftColor: 0,
}

// Testing purposes. These will be added dynamically in production version.
create.element_array["name"].push("default_header");
create.element_array["name"]["properties"].push(element_properties);

create.element_array["name"].push("default_body");
create.element_array["name"]["properties"].push(element_properties);

create.element_array["name"].push("default_footer");
create.element_array["name"]["properties"].push(element_properties);

// Evidence that each array element is changed with index manipulation.
create.element_array["name"]["properties"][0].borderTopStyle = "dashed";

console.log(create.element_array["name"]["properties"][0]);
console.log(create.element_array["name"]["properties"][1]);
console.log(create.element_array["name"]["properties"][2]);

我期望的结果是只应改变索引0，但事实并非如此。上面的console.log行将输出以下内容：

Object
borderBottomColor: 0
borderBottomStyle: 0
borderBottomWidth: 0
borderLeftColor: 0
borderLeftStyle: 0
borderLeftWidth: 0
borderRightColor: 0
borderRightStyle: 0
borderRightWidth: 0
borderTopColor: 0
borderTopStyle: "dashed"
borderTopWidth: 0
__proto__: Object
 library.js:8
Object
borderBottomColor: 0
borderBottomStyle: 0
borderBottomWidth: 0
borderLeftColor: 0
borderLeftStyle: 0
borderLeftWidth: 0
borderRightColor: 0
borderRightStyle: 0
borderRightWidth: 0
borderTopColor: 0
borderTopStyle: "dashed"
borderTopWidth: 0
__proto__: Object
 library.js:8
Object
borderBottomColor: 0
borderBottomStyle: 0
borderBottomWidth: 0
borderLeftColor: 0
borderLeftStyle: 0
borderLeftWidth: 0
borderRightColor: 0
borderRightStyle: 0
borderRightWidth: 0
borderTopColor: 0
borderTopStyle: "dashed"
borderTopWidth: 0
__proto__: Object
 library.js:8

当我明确地将索引0定义为唯一被更改的索引时，为什么要为每个元素更改borderTopStyle？

Answer 1

对象在javascript中通过引用传递。很简单：

element_properties == create.element_array [“name”] [“properties”] [0] == create.element_array [“name”] [“properties”] [1]

您可以使用new运算符或使用不同的对象文字来解决此问题。

Answer 2

您需要创建element_properties对象的新实例。像这样：

var properties_el = Object.create( element_properties );

create.element_array["name"].push("default_header");
create.element_array["name"]["properties"].push( properties_el);

此时您正在插入相同的对象3次。另一个选择是使用一个对象来存储你的属性，如下所示：

create.element_object = {};
create.element_object["name"] = properties_el;

这允许您以下列方式访问属性

create.element_object["name"]["borderTopStyle"]

或

create.element_object.name.borderTopStyle

只是一个想法。

Answer 3

您正在将element_properties对象的相同引用添加到数组中的每个点。这意味着当您尝试更改它时，您将更改该引用所指向的对象的值。

您可能希望使用属性对象的构造函数：

function ElementProperties(){
}
ElementProperties.prototype = {
    // Default all to 0.
    borderTopStyle: 0, borderRightStyle: 0, borderBottomStyle: 0, borderLeftStyle: 0,
    borderTopWidth: 0, borderRightWidth: 0, borderBottomWidth: 0, borderLeftWidth: 0, 
    borderTopColor: 0, borderRightColor: 0, borderBottomColor: 0, borderLeftColor: 0,
};

然后，这样的事情：

create.element_array["name"].push("default_header");
create.element_array["name"]["properties"].push(new ElementProperties());

将对象推送到数组上，操作会更改每个元素

3 个答案: