[英]Strange behavior with a Javascript array, object and RaphaelJS
I have a situation of defining an object with an array in it. 我有一个定义一个带有数组的对象的情况。 For some reason Chrome adds artifacts to that object before I try to use it. 出于某种原因,在我尝试使用之前,Chrome会向该对象添加工件。
My Object: 我的对象:
var colorPalettes = {
single_A7DBD8: {
amounts: [100],
colors: ['#A7DBD8']
},
single_C02942: {
amounts: [100],
colors: ['#C02942']
}
}
When I run the code, the console shows the following content for var colorPalettes
: 当我运行代码时,控制台显示var colorPalettes
的以下内容:
amounts: Array[1]
0: Object //<-- added by Chrome, 'value' should come directly in the array
order: 0
value: 100
valueOf: function (){return this.value}
__proto__: Object
length: 1
__proto__: Array[0]
colors: Array[1]
0: "#A7DBD8"
length: 1
__proto__: Array[0]
__proto__: Object
The questions are: 问题是:
amounts
have an Object
inside the array? 为什么amounts
在数组中有一个Object
? - I didn't define it. - 我没有定义它。 colors
demonstrating the same behavior? 如果是这样 - 为什么colors
不能表现出相同的行为? What did I try: 我尝试了什么:
colorPalettes
is set as window.something.colorPalettes
. 在我的代码中, colorPalettes
设置为window.something.colorPalettes
。 I turned it into a local variable - no success. 我把它变成了一个局部变量 - 没有成功。 amounts
and colors
(I know, I was desperate...) - so the behavior also swapped, now colors
had the extra Object
. 我尝试交换amounts
和colors
的顺序(我知道,我是绝望的......) - 所以行为也交换了,现在colors
有额外的Object
。 Object
inside colorPalettes
. 我将我的代码放入http://jsfiddle.net/2JfyX/4/但行为是正常的 - 在colorPalettes
没有额外的Object
。 Edit 1: 编辑1:
I also tried to put a string inside amounts
instead of its current int
. 我还尝试将一个字符串放在amounts
而不是当前的int
。
Edit 2: 编辑2:
Tried to simulate adding a jQuery click event as in my code, was not able to reproduce http://jsfiddle.net/2JfyX/19/ 试图模拟在我的代码中添加jQuery click事件,无法重现http://jsfiddle.net/2JfyX/19/
Edit 3: 编辑3:
I believe I have found the culprit. 我相信我找到了罪魁祸首。 It is g.Raphael. 这是g.Raphael。 For some reason (didn't delve into their code yet), it makes changes to the object I pass to it 由于某种原因(尚未深入研究他们的代码),它会对我传递给它的对象进行更改
You can see that I directly pass colorPalettes
to r.piechart and in the 6th loop it changes my array to contain an object. 你可以看到我直接将colorPalettes
传递给r.piechart,在第6个循环中它将我的数组更改为包含一个对象。 Not nice :-O 不好:-O
I will clone the arrays from now on and hope for the best... 我将从现在开始克隆阵列并希望最好的......
function renderPalettes(colorPalettes, radius) {
var gap = radius + 20;
for (var palette in colorPalettes) {
var paletteObj = r.piechart(gap, 43, radius, colorPalettes[palette].amounts, {
colors: colorPalettes[palette].colors,
stroke: "#cdcdcd",
strokewidth: '0.3'
});
for (var i = 0; i < paletteObj.series.items.length; i++) {
paletteObj.series.items[i].node.setAttribute('class', palette + ' sliderPalette');
}
gap = gap + radius * 2 + 24;
}
}
Any idea? 任何想法? Thanks, D. 感谢:D。
I just ran this code in FireFox Firebug. 我刚刚在FireFox Firebug中运行了这段代码。 I did console.log() on the object and the following result was displayed. 我在对象上执行了console.log(),并显示了以下结果。
This pretty much explains the whole situation. 这几乎解释了整个情况。 The object has two nested objects inside it single_A7DBD8 and single_C02942 Both these objects contain two arrays. 该对象内部有两个嵌套对象single_A7DBD8和single_C02942这两个对象都包含两个数组。 "amounts" and "colors". “数量”和“颜色”。
As you can see the + sign with each array. 正如你可以看到每个数组的+符号。 It shows that these contain elements and we can expand these to see elements at each index of the array. 它显示这些包含元素,我们可以扩展它们以查看数组的每个索引处的元素。
So if you want to access the first element of amounts array in first object execute this code: 因此,如果要在第一个对象中访问amount数组的第一个元素,请执行以下代码:
console.log(colorPalettes.single_A7DBD8.amounts[0]);
Remember colorPalettes contains two objects 记住colorPalettes包含两个对象
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.