javascript - 如何在数组中存储对象的不同状态？

Question

我有一个名为 apples 的对象，如果我执行 apples[0].weight 之类的操作，它会返回一个值。现在我希望能够存储一个苹果数组。让我们调用数组 myApples。如何将 apples 的多个实例添加到 myApples 数组中，而不将值更改为最新的值。例如:

apples[0].weight = 10;
apples[1].weight = 20;
myApples.push(apples);
apples[0].weight = 15;
apples[1].weight = 16;
myApples.push(apples);

现在，如果我要打印值 myApples[0].apples[0].weight 我会得到 15 而不是 10。我认为这是因为引用是同一个数组，所以它每次我更改它时都会更新。我将如何存储这些“状态”，以便我可以保留对其所做的更改的历史记录。请记住，我想让这个任意，所以我不必制作像 apples1、apples2、apples3 这样的东西，因为对此的更改可能是无限的。(在我的实际项目中，我将精确点存储在 Canvas 上，所以我基本上可以执行“撤消”和“重做”功能，并希望在 Canvas 上每次发生变化时存储这些精确点的值。)

编辑-这就是我制作苹果或pinpoints的方法:

var options = {pinpoints: [ { "top": 50,
                           "left": 280,
                           "width": 200,
                           "height": 200},
                         { "top": 0,
                           "left": 0,
                           "width": 300,
                           "height": 74 } ]}    
var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);
var myPinpoints = optionConfig.pinpoints;

因此，如果我执行 myPinpoints[0].left ，它会给我 280，我希望能够将 myPinpoints 插入数组，然后将 myPinpoints[0].left 更改为其他内容，然后再次将其插入数组并保存两个值

Answer 1

您可以使用 jQuery.clone 类型的 API 来克隆对象并将其移动到堆栈或队列中。这样您就可以确保单独维护对象状态。