用 for 循环创建的两个数组填充对象答案

【问题标题】：Fill object with two array created by for loops用 for 循环创建的两个数组填充对象
【发布时间】：2017-05-13 13:54:13
【问题描述】：

早上好，

我正在学习 Javascript，但在使用循环创建对象和数组时遇到了一些麻烦。我确信这是一个简单的解决方案，但我无法通过阅读一些示例找到已解决的问题或弄清楚它。

绘制两个变量的绘图代码如下：

var trace1 = {
  x: [0, 1, 2, 3, 4],
  y: [0, 1, 2, 3, 4],
  type: 'scatter'
};
var data = [trace1];

Plotly.newPlot('myDiv', data);

但是当我尝试通过 for 循环创建 x 和 y 然后用这些数组填充对象 trace1 时，它似乎不起作用。图形出现，但里面没有数据。

var x = [];
        for ( i = 0 ; i < 5; i++)
            x.push(x[i]=i);
        var y = [];
        for ( i = 0 ; i < 5; i++)
            y.push(y[i]=i);
        var type = 'scatter'
        trace1 ={x, y, type}

var data = [trace1];

    Plotly.newPlot('myDiv', data);

感谢您的帮助。

【问题讨论】：

标签： javascript arrays loops push javascript-objects

【解决方案1】：

您应该将x.push(x[i]=i) 更改为x.push(i)。您使用的前者正在执行两个操作：首先它设置x[i] = i，然后它将评估结果（即i）推送到x 的末尾。

【讨论】：

【解决方案2】：

你可以试试这个代码

var x = [];
for ( i = 0 ; i < 5; i++) { x.push(i); }

var y = [];
for ( i = 0 ; i < 5; i++) { y.push(i); }    

var type = 'scatter';
var trace1 = { x: x, y: y, type: type };

var data = [trace1];

    Plotly.newPlot('myDiv', data);

【讨论】：

【解决方案3】：

您需要像在第一个代码示例中一样创建对象。

var xArr = [];
for ( i = 0 ; i < 5; i++) {
  xArr.push(i);
}

var yArr = [];
for ( i = 0 ; i < 5; i++) {
  yArr.push(i);
}
var typeString = 'scatter'

trace1 = {
  x: xArr,
  y: yArr,
  type: typeString
}

var data = [trace1];
Plotly.newPlot('myDiv', data);

【讨论】：

【解决方案4】：

您的数组中有一个额外条目的原因是，在第一次迭代后array x 看起来像x[0] = and x[1] = 0。第二次迭代后，它看起来像 x[0] = 0, x[1] = 1 and x[2] = 1。 y array 也是如此。这是由于将值分配给数组以及推送分配结果的副作用。这样，它会在每次迭代中添加一个额外的条目。

你需要这样做：

var x = [];
for (i = 0; i < 5; i++)
  x.push(i);
var y = [];
for (i = 0; i < 5; i++)
  y.push(i);
var type = 'scatter'
trace1 = {
  x,
  y,
  type
}

var data = [trace1];

console.log(x);
console.log(y);
//Plotly.newPlot('myDiv', data);

【讨论】：