Javascript关联数组：推送对象会重写其他数组元素

我有一个描述我的文档的对象。每个文档都包含在数组中的对象中描述的层

var example = {
    id: 'some_id',
    layers: [{
        id: 'some_layer_id',
        width: 100,
        height: 200
    }]
};

有不同类型的层，每个层都有其模板：

var layer_templates = [{
    type: 'text',
    width: 100,
    height: 100,
    style: 'common'
}];

我在jQuery事件中创建新层：

jQuery('#button').on('click', function () {
    var ldata = layer_templates[0]; // get a template
    ldata['id'] = 's-l-' + Math.random().toString(); // create an id
    example['layers'].push(ldata); // add new "layer" to document
    console.log(example['layers']); // check
});

每次我将新的

ldata

层添加到

example['layers']

数组时，它只保留id为“some\u layer\u id”的初始对象，并用最后一个对象重写所有新创建的对象

---

请检查JSFIDLE:

问题是您没有复制模板。在所有层中使用并重复使用同一模板

var ldata = layer_templates[0];
ldata['id'] = 's-l-' + Math.random().toString(); // create an id

实际上，

ldata

只是一个引用模板的指针，向其中添加id值只会修改模板，因此现在看起来像这样：

var layer_templates = [{
    type: 'text',
    width: 100,
    height: 100,
    style: 'common',
    id: 's-l-0.08636776800267398'
}];

下次尝试添加另一层时，再次执行相同的操作，只会再次拉取和更改模板。。。最后，每个层引用相同的模板，因此是完全相同的数据

要解决此问题，您需要复制模板，一种方法是使用JSON：

var ldata = JSON.parse(JSON.stringify(layer_templates[0]));

---

此方法创建一个全新的ldata对象，该对象是模板的副本。

这是控制台问题，并设置相同的id.log

console.log（ldata.id）

或

JSON.stringify（ldata）IE中也发生了同样的事情。主要问题是我尝试更新一个更大的数组，它用相同id的对象来更新它（（所有的控制台都这样做了…你只记录了id吗？它被复制了吗？不，只是id没有复制你！我想我不必在每次更改id时创建新的副本。。。