静的配列の宣言と初期化

Question

JSを最初から学習し、JSを使用してHighChartsコードを実装しています。

 data = [{ 
     y: 55.11, 
     color: colors[0], 
     drilldown: { 
      name: 'MSIE versions', 
      categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'], 
      data: [{ 
       y: 33.06, 
       drilldown: { 
        name: 'drilldown next level', 
        categories: ['a', 'b', 'c'], 
        data: [23,54,47], 
        color: colors[0] 
       } 
      }, 10.85, 7.35, 2.41], 
      color: colors[0] 
     } 
    }, { 
     y: 21.63, 
     color: colors[1], 
     drilldown: { 
      name: 'Firefox versions', 
      categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'], 
      data: [13.52, 5.43, 1.58, 0.83, 0.20], 
      color: colors[1] 
     } 
    }]; 

は、この「データ」の配列declartion手段を何説明してください：私は、可変データ配列declartion以下のように見るのデモの一つを見て？

Answer 1

それは、2つの要素を持つ配列である各オブジェクト。それらはobject literal notationで宣言されています。たとえば、2番目の要素は次のとおりです。

{ 
    y: 21.63, 
    color: colors[1], 
    drilldown: { 
     name: 'Firefox versions', 
     categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'], 
     data: [13.52, 5.43, 1.58, 0.83, 0.20], 
     color: colors[1] 
    } 
} 

このオブジェクトはさまざまなプロパティで構成されています。たとえば、プロパティ "y"の値は21.63です。プロパティ "drilldown"は別のオブジェクトなどです。プリミティブ、配列、およびオブジェクトは、無限に埋め込むことができます。

さらに、data [0]とdata [1]は同じプロパティを持つので、類似したオブジェクトであると見なすことができます。

構造を見るのに苦労している場合は、コードスタイル、特にインデントに厳しいものがあります。私はそれを少し改造し、非常に寛大な間隔を示した。それはより多くの行を取りますが、関連するものが明確になるはずです。

data = [ 
    { 
     y: 55.11, 
     color: colors[0], 
     drilldown: { 
     name: 'MSIE versions', 
      categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'], 
      data: [ 
       { 
        y: 33.06, 
        drilldown: { 
         name: 'drilldown next level', 
         categories: ['a', 'b', 'c'], 
         data: [23,54,47], 
         color: colors[0] 
        } 
       }, 
       10.85, 
       7.35, 
       2.41 
      ], 
      color: colors[0] 
     } 
    },{ 
     y: 21.63, 
     color: colors[1], 
     drilldown: { 
      name: 'Firefox versions', 
      categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'], 
      data: [13.52, 5.43, 1.58, 0.83, 0.20], 
      color: colors[1] 
     } 
    } 
]; 

Answer 2

dataは、2つのオブジェクトリテラルを含む配列です。それぞれのオブジェクトリテラルには、yとcolorのような単純なものと、それ自体のプロパティを持つオブジェクトリテラルであるdrilldownのような複雑なものがあります。

これらのような時には、何が何に属しているのかを見やすくするために、非常に明確な書式設定が必要です。

Answer 3

はあなたの混乱を仮定すると

data

が別の類似した構造を含む drilldownと呼ばれる性質をそれぞれ有する複数のオブジェクトリテラルを含む配列であり、むしろ data : [23,54,47]ような静的アレイより data = [{として開始 data配列でありますそのような他のそのような dataアレイを含むことができる。

はこれに類似した構造に分けることができる：

data --> (array) 
      |--> object 
      |  --> name 
      |  --> category 
      |  --> drilldown (object) 
      |    --> data (array) 
      |     |--> object 
      |     |--> object 
      |--> object 
       --> name 
       --> category 
       --> drilldown (object) 
         --> data (array) 
          |--> object 
          |--> object 

Answer 4

データはオブジェクトであり、いくつかのオブジェクトを含み、中括弧{}はすべてオブジェクトを表します。例えば、上記の例で

var data=[{ 
    a:'Hello',b:'world'}, 
    { 
     x:'Hello World', 
     y:function(){ alert(this.x);} 
    }]; 

は

{a:'Hello',b:'world'} // This object contains two properties/variables a and b 

はオブジェクトであり、それはデータ・アレイと

{ 
    x:'Hello World' // This is a property/Variable of 2nd objec 
    y:function(){ alert(this.x);}, // This is a method/function of 2nd object 

} 

の最初の（インデックス0）要素が2（インデックス1）の要素であるですのデータ配列を呼び出すことができます。

alert(data[0].a); // Will alert "hello" because first (0) item/object of data array has a variable that's value is "hello" 
data[1].y(); // Will alert "Hello World" because 2nd item/object of data array has a method/function that alerts it's 'x' variable's data, 'this' indicates current object. 

フィドルはhereです。