javascript - 修改数组中的子项

Question

现在我有一个包含 120 对的数组。例如:

[[1, 12],
 [2, 15],
 [3, 10]]

基本上有120长。现在我在 Jquery Flot 图中使用这些数据。 “I have a live example on jsFiddle here”

代码:

var numbers = [];
var jsonString = "";
var PlotData;
var x = 0;

function EveryOneSec() {
  if (numbers.length == 120) {
      numbers.shift();
  }
  numbers.push([x++, Math.random()*10]);
  PlotData = numbers;
  $.plot($("#PlaceHolder"), [{ data: PlotData, points: { show: true},lines: { show: true }}]);
    console.log(PlotData);
  setTimeout(EveryOneSec, 1000);
}
EveryOneSec();

我正在动态创建数字( see jsFiddle Example )，只需将第一个数字简单地增加 1，将第二个数字随机添加到数学中，现在这一切都运行良好，并且可以再次计数，请参阅 jsfiddle 示例.

现在我想要尝试做的不是将数字加 1，而是使用数组。因此，对于数组内的所有数组，数组的第一对始终为 [1, ##]，第 120 对始终为 [120, ##]。这个想法是，它每 1 秒更新一次，因此最接近左侧轴的最终结果是 120，显示 120 秒前或 2 分钟。

所以问题是:最有效的方法是什么？

因为即时添加的数字在下次更新时就会过时。

Answer 1

具有 120 个元素的数组不需要很长时间进行迭代，因此在 IMO 上对其执行 for...next 是可以的。清理代码，你可以:

var numbers = [];
var jsonString = "";

function EveryOneSec() {
  numbers.push(Math.round(Math.random()*10));  // generate integer from 0-10
  numbers = numbers.slice(-120); // keep only the last 120 max elements every time
  var PlotData = $.map(numbers, function(n,i) { return [[i+1,n]]; });
  $.plot($("#PlaceHolder"), [{ data: PlotData, points: { show: true},lines: { show: true }]);
  console.log(PlotData);
}
var timer = setInterval(EveryOneSec, 1000);

// you can stop the timer with clearInterval(timer);

*****编辑****:上面的代码将从右向左“滚动”点，要反转这一点，您可以取消移动数据而不是推送，只需替换前两行即可以此功能

numbers.unshift(Math.round(Math.random()*10));  // generate integer from 0-10
numbers = numbers.slice(0, 120); // keep only the fist 120 max elements every time

您将从左向右“滚动”:)

要反转轴(从 120 到 0)，只需替换返回值:[[120-i,n]]