使用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 click事件，無法重現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這兩個對象都包含兩個數組。 “數量”和“顏色”。

正如你可以看到每個數組的+符號。 它顯示這些包含元素，我們可以擴展它們以查看數組的每個索引處的元素。

因此，如果要在第一個對象中訪問amount數組的第一個元素，請執行以下代碼：

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

記住colorPalettes包含兩個對象