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

Javascript associative array: pushing an object rewrites other array elements

本文关键字：重写 其他 数组元素 一个对象 关联 数组 Javascript      更新时间：2023-09-26

我有一个对象来描述我的文档。每个文档都包含层，这些层在数组中的对象中进行了描述

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
});

每次我向example['layers']数组添加新的ldata层时，它只保留带有id: 'some_layer_id'的初始对象，并用最后一个重写所有新创建的对象。

请检查jsFiddle：中的问题

问题是您没有复制模板。您正在所有层中使用和重新使用相同的模板

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

相关文章：