Javascript 如何存储对象数组？

我有一个对象

image

我可以做像

image这样的事情。top

会返回一个值，或者我可以做

image.myPoints[0]。left

会返回一个值。我基本上有这个图像对象，它为我存储值。我希望能够将多个

图像

对象放入一个数组中，以便执行以下操作：

$("#toPinpoint").mapImage({
                useAjax: false,
                pinpoints: [ { "top": 50,
                           "left": 280,
                           "width": 200,
                           "height": 200},
                         { "top": 0,
                           "left": 0,
                           "width": 300,
                           "height": 74 } ] 
            });

我使用这个函数来创建对象，精确点被添加到对象上。调用mapImage函数时，会发生以下情况：

    $.fn.mapImage = function(options){



    //Set user input options and defaults
    var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);

    image=this;
    this.image = this;

    // Assign defaults
    this.previewMode = optionConfig.previewMode;
    this.pinpoints = optionConfig.pinpoints;
    image.pinpoints = optionConfig.pinpoints;
    image.pinpointCount = 0;
    image.selected = 0;
    ...}

这将设置图像属性，现在我想用我的应用程序修改属性，然后将这些

image

对象保存到数组中

我的问题是，数组正在加载图像对象，但它似乎用我刚刚推入的对象填充整个数组，因此它不会保存我的旧图像对象。例如，如果我执行myArray[0].myPoints[0]。left，假设它重新运行30，然后我推送另一个具有myPoints[0]的图像对象。left等于20，则数组中的第一个图像对象将变为20，而不是将其保存为30。如果有解决这个问题的好办法，我们将不胜感激。谢谢大家!

使用

array.push（x）

应将

x

添加到

array

的末尾。但是，它不会创建

x

的副本，因此，如果您随后再次更改

x

和

push（）

的属性，您的数组将包含两个具有更新属性的

x

实例-我怀疑这就是您看到的。（也就是说，您可能正在将

图像的
top
属性更改为
push（）
，而不是创建一个全新的
图像
为
push（）
）

你需要使用“new”关键字。
我认为你把这个问题弄得比需要的更复杂了

(function($){
  $.fn.mapImage = function(options) {
    var defaults = { /* your defaults here */ };

    // Merge default options with passed in options and store
    options = ($.extend({}, defaults, options));

    // Do other stuff
  };
})(jQuery);

// Backup current pinpoints and modify the current one
$('#toPinpoints').data('pinpoints-backup', $('#toPinpoints').data('pinpoints').splice());
$('#toPinpoints').data('pinpoints')[0].top = 100;

// Push a new array of pinpoints
$('#toPinpoints').data('pinpoints').push({"top": 100, "left": 50, "width": 200, "height": 150});

请小心，因为它不会递归操作，因此默认子数组中的任何数组都将被选项数组中的数组完全覆盖，而不是合并

如果以后需要访问pinpoints数据，您可能希望通过执行类似
this.data（$.extend（{}，$.fn.mapImage.defaults，options））的操作来使用而不是重新指定选项变量。然后，
$（“#toPinpoint”）.data（'pinpoints'）
可以在任何地方访问给定元素的精确定位，它将返回您通过选项传递到
mapImage（）
的相同数组。然后，您可以用鼠标遍历所有的精确点

如果我在您试图做的事情中遗漏了什么，请告诉我。
我似乎无法复制这一点。你能发布一个更详细的代码示例吗？当你说“弹出”另一个图像时，你的意思是推吗？因为它们有相反的结果。@Andrew Marshall:我是说对不起，是的，我会在你的反模式中放一个更详细的例子：
image=this；this.image=this嗨，我是循环参考！我一开始也这么想，但是省略
new
关键字似乎可以正常工作并通过lint。仅仅因为它通过lint并不意味着它是预期用途，并且在没有
new
关键字的情况下使用构造函数是不明智的。我知道，我不建议在没有
new
关键字的情况下使用它，并且惊讶地发现它工作并通过了lint，因为我觉得它错得太厉害了。@ken，var myArray=newarray（）之间的区别是什么；和var myArray=[]；我认为你完全正确，但我该如何着手解决这个问题呢？如何在每次添加该对象时创建该对象的新实例取决于您当前创建该对象的方式。它应该类似于
var secondImage=new MyImage（）。我说“MyImage”而不是“Image”，因为后者已经是javascript中现有的DOM对象。（再一次，提供一个更广泛的代码示例以更好地了解您当前拥有的内容会很有帮助：））您需要“新建”图像，而不是数组。如何创建第一个图像？我已经用一个更好的示例对其进行了更新，这几乎是我的代码。嘿，这肯定是有意义的，但是现在我如何向阵列添加多个精确点？这给了我一组精确定位，现在让我们假设我想修改所有这些精确定位的值，然后将其推送到数组中，这样我就有了旧值和新值。您可以在
jQuery.data（）
中存储任何内容，请查看该值。调用
.data（'pinpoints'）[0]。top=100
应修改当前值。您可以通过
.data（'pinpoints'）.push（newPinpoints）
添加新的精确定位。如果需要备份当前数据，可以执行
.data（'pinpoints-backup'，.data（'pinpoints.splice（））
。（请注意，我在
.data（）
之前省略了
这个
关键字，因为您可能在外部执行此操作，并且需要使用选择器）（我已根据我的注释编辑了我的答案）（很抱歉一行中有多条注释）
(function($){
  $.fn.mapImage = function(options) {
    var defaults = { /* your defaults here */ };

    // Merge default options with passed in options and store
    options = ($.extend({}, defaults, options));

    // Do other stuff
  };
})(jQuery);

// Backup current pinpoints and modify the current one
$('#toPinpoints').data('pinpoints-backup', $('#toPinpoints').data('pinpoints').splice());
$('#toPinpoints').data('pinpoints')[0].top = 100;

// Push a new array of pinpoints
$('#toPinpoints').data('pinpoints').push({"top": 100, "left": 50, "width": 200, "height": 150});