javascript 如何存储对象数组?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5012899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:39:36  来源:igfitidea点击:

How do I store an array of objects?

javascriptjquery

提问by anthonypliu

I have an object imageI can do things like image.topand it will return a value, or I can do image.myPoints[0].leftand it will return a value. I basically have this image object that stores values for me. I want to be able to put multiple imageobjects in an array so i could do something like this:

我有一个对象,image我可以做这样的事情image.top,它会返回一个值,或者我可以做image.myPoints[0].left,它会返回一个值。我基本上有这个图像对象为我存储值。我希望能够将多个image对象放入一个数组中,这样我就可以执行以下操作:

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

I use this function to create the object, the pinpoints get added on to the object. When the mapImage function is called this is what happens:

我使用这个函数来创建对象,精确点被添加到对象上。当调用 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;
    ...}

This sets the image properties and now I want to modify the properities with my application then SAVE these imageobjects into an array.

这将设置图像属性,现在我想用我的应用程序修改属性,然后将这些image对象保存到一个数组中。

My problem with this is that the array is loading up with image objects, but it seems to fill the whole array with the object i just pushed in, so it doesnt save my old image objects. For example, if i do myArray[0].myPoints[0].left, lets say it retruns 30, and then i push another image object that has myPoints[0].left equal to 20, the first image object I have in the array turns into 20 instead of saving it as 30. If theres a good way of solving this issue it would be greatly appreciated. Thank you!

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

回答by levik

Using array.push(x)should add xto the end of array. However, it will not create a copy of x, so if you then change an attribute of xand push()it again, your array will contain two instances of xwith the updated attribute - I suspect this is what you are seeing. (That is, you may be changing the topproperty of your imageand push()ing it again, instead of creating a whole new imageto push()).

Usingarray.push(x)应该添加xarray. 但是,它不会创建 的副本x,因此如果您随后更改了 的属性xpush()再次更改了它,您的数组将包含两个x具有更新属性的 的实例- 我怀疑这就是您所看到的。(也就是说,您可能正在更改top您的属性imagepush()再次调用它,而不是创建一个全新imagepush())。

回答by ken

var myArray = new Array();

You need to use the "new" keyword.

您需要使用“new”关键字。

回答by Andrew Marshall

I think you're making this more complicated than need be.

我认为你让这比需要的更复杂。

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

Be careful with jQuery.extend()as it does not operate recursively, so any arrays that are within the defaults sub-array will be completely overwritten by those in the options array, notmerged.

请注意,jQuery.extend()因为它不会递归操作,因此默认子数组中的任何数组都将被选项数组中的数组完全覆盖,而不是合并。

If you'll need to access the pinpoints data later, you may wish to use jQuery.data()by doing something like this.data($.extend({}, $.fn.mapImage.defaults, options));instead of reassigning the options variable. The pinpoints for a given element could then be accessed anywhere by $('#toPinpoint').data('pinpoints')which will return the same array you passed in via options to mapImage(). You could then traverse all the pinpoints with jQuery.each().

如果您稍后需要访问精确定位数据,您可能希望jQuery.data()通过执行类似操作this.data($.extend({}, $.fn.mapImage.defaults, options));而不是重新分配选项变量来使用。然后可以在任何地方访问给定元素的精确点,$('#toPinpoint').data('pinpoints')这将返回您通过选项传入的相同数组mapImage()。然后,您可以使用 遍历所有精确点jQuery.each()

If I'm missing something in what you're trying to do, please let me know.

如果我在您尝试做的事情中遗漏了什么,请告诉我。