Javascript对象数组表现得很奇怪

Question

function graphify( options ){
    var dataPts = [], temp = {};

    console.log("1 datapts", dataPts) //1 datapts []
    $.each(options.data, function(index, r){
        temp = {label: r.tag, y: r.value};
        console.log("temp", temp); //temp Object {label: "Tuscany", y: "1841990.0"}
        dataPts.push(temp);
        console.log("loop datapts", dataPts);//seen on the screenshot on the comments
    });

    console.log("2 datapts", dataPts)//same with the screenshot
    var chart = new CanvasJS.Chart(options.wrapper, {
        title: { text: options.title },
        animationEnabled: true,
        data: [{
            type: "column",
            dataPoints: dataPts
        }]
    });
    console.log("3 datapts", dataPts)//same with the screenshot
    chart.render();
}

当我将数据放在temp中时，它按照我的意愿工作，但是当我将对象推入dataPts时，它向对象添加了一个额外的属性x =“0”。我不想在那里使用x值因为它弄乱了插件。为什么会发生这种情况？如何解决？

Answer 1

这里要注意的一些事情......

console.log()如何真正起作用

这行代码并没有完全符合您的预期：

console.log("loop datapts", dataPts);

该代码不会将dataPts数组的当前值记录到控制台。它只将引用记录到该数组。因此，当您稍后在控制台中展开dataPts时，您在调用console.log()时没有看到其值，当您展开它时，您会看到它们存在的值

因此，这并不一定意味着x调用时数组元素中存在console.log()属性。在您在控制台中手动展开阵列之前，可以随时添加x。

如果要在调用console.log()时记录数组或对象的实际值，那么最好使用JSON.stringify()。这会将数组转换为显示调用时的值的字符串。您可以使用可选的space参数使输出打印得很漂亮：

console.log( "loop datapts", JSON.stringify( dataPts, null, 4 ) );

x来自哪里？

由于您的代码中没有x，x来自何处？ CanvasJS代码正在添加它。

如果您从the CanvasJS website下载代码并使用区分大小写的全字搜索搜索canvasjs.js x文件，则会遇到以下代码：

for (i = 0; i < dataSeries.dataPoints.length; i++) {

    // Requird when no x values are provided 
    if (typeof dataSeries.dataPoints[i].x === "undefined") {
        dataSeries.dataPoints[i].x = i;
    }
    // ... more code here ...
}

看看发生了什么？它会检查dataPoints的每个元素（这是您的dataPts数组）以查看它是否具有x属性。如果该属性不存在，则会在该处添加属性。

我不知道如何使代码工作的问题的答案，但这是对你所看到的行为的解释。

另一个小调

此代码（取自您的问题，但为了清晰起见，删除了console.log()次调用）应该稍作修改：

var dataPts = [], temp = {};
$.each(options.data, function(index, r){
    temp = {label: r.tag, y: r.value};
    dataPts.push(temp);
});

temp不应该在$.each()之外声明。相反，它应该在$.each()回调中声明，因为它是唯一使用它的地方：

var dataPts = [];
$.each(options.data, function(index, r){
    var temp = {label: r.tag, y: r.value};
    dataPts.push(temp);
});

当然，在那时根本不需要temp变量。你可以简单地写：

var dataPts = [];
$.each(options.data, function(index, r){
    dataPts.push({ label: r.tag, y: r.value });
});

但是有一种更简单的方法来写这个。使用map代替each：

var dataPts = $.map( options.data, function( r ) {
    return({ label: r.tag, y: r.value });
});