정적 배열 선언 및 초기화

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

그것은 두 요소 배열이다 각 개체. 그것들은 object literal notation에 선언되어 있습니다. 예를 들어 두 번째 요소는 다음과 같습니다.

{ 
    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입니다. "드릴 다운"속성은 또 다른 객체입니다. 프리미티브, 배열 및 객체는 무한히 포함될 수 있습니다.

또한 데이터 [0]과 데이터 [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은 두 개의 개체 리터럴을 포함하는 배열입니다. 각각의 객체 리터럴은 차례대로 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 

} 

가 2 (인덱스 1) 소자 인 제 (인덱스 0), 데이터 어레이의 요소

있어 데이터 배열을 호출하여

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입니다.