Question

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

中描述

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_layer_id'的初始对象，并用最后一个重写所有新创建的对象。

请检查jsFiddle：Problem in action

Answer 1

问题是您没有复制模板。您正在所有图层中使用和重复使用SAME模板

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对象，该对象是模板的副本。

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

1 个答案: