javascript - Javascript 数组、对象和 RaphaelJS 的奇怪行为

Question

我有一种情况是定义一个对象，里面有一个数组。出于某种原因，Chrome 在我尝试使用它之前向该对象添加了工件。

我的对象:

var colorPalettes = {
            single_A7DBD8: {
                amounts: [100],
                colors: ['#A7DBD8']
            }, 
            single_C02942: {
                amounts: [100],
                colors: ['#C02942']
            }
}

当我运行代码时，控制台显示 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

问题是:

1. 为什么 amounts 在数组中有一个 Object？ - 我没有定义它。
2. 如果是这样 - 为什么 colors 没有表现出相同的行为？
3. 为什么当我通过 jsfiddle 运行我的代码时，此行为没有显示出来？

我尝试了什么:

1. 在我的代码中，colorPalettes 设置为 window.something.colorPalettes。我把它变成了一个局部变量——没有成功。
2. 我尝试交换 amounts 和 colors 的顺序(我知道，我很绝望......) - 所以行为也交换了，现在 colors 有额外的 Object。
3. 我将我的代码放入http://jsfiddle.net/2JfyX/4/但行为是正常的 - colorPalettes 中没有额外的 Object。

编辑 1:

我还尝试在 amounts 中放置一个字符串，而不是当前的 int。

编辑 2:
尝试模拟在我的代码中添加 jQuery 单击事件，但无法重现 http://jsfiddle.net/2JfyX/19/

编辑 3:
我相信我找到了罪魁祸首。是g.Raphael。出于某种原因(还没有深入研究他们的代码)，它对我传递给它的对象进行了更改

您可以看到我直接将 colorPalettes 传递给 r.piechart 并且在第 6 个循环中它更改了我的数组以包含一个对象。不好:-O

从现在开始我将克隆阵列并希望一切顺利......

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;
            }
        }

有什么想法吗？谢谢，D.

Answer 1

我刚刚在 FireFox Firebug 中运行了这段代码。我在对象上执行了 console.log() 并显示了以下结果。

这几乎可以解释整个情况。该对象内部有两个嵌套对象 single_A7DBD8 和 single_C02942 这两个对象都包含两个数组。 “数量”和“颜色”。

如您所见，每个数组都有一个 + 号。它表明这些包含元素，我们可以展开这些以查看数组每个索引处的元素。

因此，如果您想访问第一个对象中金额数组的第一个元素，请执行以下代码:

console.log(colorPalettes.single_A7DBD8.amounts[0]); 

记住 colorPalettes 包含两个对象