简体   繁体   English

JS / Javascript 使用.push 或.unshift 是为了跟踪一个变量的历史

[英]JS / Javascript Using .push or .unshift is to Track the history of a variable

I'm working on a book reader.我正在做一个阅读器。 I have a variable currentPostition that as its name implies, always knows where in the book the user is.我有一个变量 currentPostition,顾名思义,它总是知道用户在书中的哪个位置。 I'm trying to create a history of the users location so I can add a back button like a web browser.我正在尝试创建用户位置的历史记录,以便可以添加一个后退按钮,例如 web 浏览器。 So in the setup I have:所以在设置中我有:

currentPostition;  //this is a json object with book,chapter,page stored in it.
history = [];          //array of json objects

Then later when the user navigates (there are a few different types of navigation):然后稍后当用户导航时(有几种不同类型的导航):

history.push(currentPostition);  //save in history before updating currpos

//put new values in currentPosition
currentPostition.book = foo;
currentPostition.chapter = foo;
currentPostition.page = foo;

So far so good right?到目前为止还不错吧? Well the problem is such.那么问题就是这样。 My history array grows in length as one would expect.正如人们所期望的那样,我的历史数组的长度会增加。 BUT, every entry in the history array will be the same as the last object placed in the array.但是,历史数组中的每个条目都将与放置在数组中的最后一个 object 相同。 IE: IE:

for (x=0;v<history.lenght;x++){
   document.write(history[x].book+","+history[x].chapter+","+history[x].page+"<br />");
}

will result in an output of something like将导致 output 类似于

3rdBookPosition,3rdChapterPosition,3rdPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition

So, I'm stumped cause I expect an output like:所以,我很难过,因为我希望 output 像:

1stBookPosition,1stChapterPosition,1stPagePosition 2ndBookPosition,2ndChapterPosition,2ndPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition 1stBookPosition,1stChapterPosition,1stPagePosition 2ndBookPosition,2ndChapterPosition,2ndPagePosition 3rdBookPosition,3rdChapterPosition,3rdPagePosition

What am I doing wrong?我究竟做错了什么? FYI, I've tried unshift and history[history.length] as well and the net the same results.仅供参考,我也尝试过unshifthistory[history.length]并且得到相同的结果。

Thanks in advance, Jev在此先感谢,杰夫

The problem is that you push the same instance of your currentPosition object in your history array.问题是您将 currentPosition object 的同一个实例推送到历史数组中。 Doing so you end up with multiple pointer to the same currentPosition instance .这样做你最终会得到多个指向同一个 currentPosition 实例的指针

To avoid this problem you need to use a new currentPosition instance either by using the keyword new if you have a constructor function or by simply copying the object into another like doing $.extend({},currentPosition) with jQuery.为避免此问题,您需要使用的 currentPosition 实例,如果您有构造函数 function 则使用关键字 new 或只需将 object 复制到另一个实例中,例如使用 ZF59CFDE6331BD59EB2AC96F8911C4B666Z 执行$.extend({},currentPosition)

Hope this help.希望这有帮助。

Edit: You can create your own extends function, something like that:编辑:您可以创建自己的扩展 function,类似这样:

function extends(destObject,srcObject){
  for(var i in srcObject){
    destObject[i] = srcObject[i];
  }
}

This is a really simple version you can find slightly more complex version that will clone your object recursively but I imagine i can be sufficient for your question so it would be:这是一个非常简单的版本,您可以找到稍微复杂一点的版本,它将递归地克隆您的 object 但我想我可以满足您的问题,所以它是:

var oldPos = extends({},currentPosition);
history.push(oldPos);

Mostly all in JS is passed by reference.大多数情况下,JS 中的所有内容都是通过引用传递的。 So, you add to array only reference of currentPostition.因此,您将 currentPostition 的唯一引用添加到数组中。 You need to assign new empty object before using currentPostition another time:在再次使用 currentPostition 之前,您需要分配新的空 object :

currentPostition = {};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM