Javascript对象数组的行为很奇怪
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值在里面，因为它把插件搞乱了。为什么会发生这种事，我该如何解决呢？
回答 1
Stack Overflow用户
发布于 2015-09-04 04:06:58
这里有几件事要注意..。
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代码正在添加它。
如果您从CanvasJS网站下载代码并使用区分大小写的整个单词搜索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 });
});https://stackoverflow.com/questions/32389681
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号