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

这个'数据'数组声明意味着什么？

Answer 1

假设您对以data开头的data = [{数组而非data : [23,54,47]等静态数组感到困惑，

data是一个包含多个对象文字的数组，每个对象文字都有一个名为drilldown的属性，其中包含另一个类似的结构，可能包含另一个此类data数组。

它可以分解为类似于此的结构：

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

Answer 2

这是一个包含两个元素的数组，每个元素都是一个对象。这些是在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。属性“drilldown”是另一个对象，依此类推。可以无限制地嵌入基元，数组和对象。

此外，我可以推断出数据[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 3

data是一个包含两个对象文字的数组。每个对象文字依次包含各种属性，一些简单，如y和color，还有一些更复杂，如drilldown，它本身就是一个具有自己属性的对象文字。

在这些时候，最好有非常清晰的格式，以便更容易看到属于什么。

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

是一个对象，它是数据数组的第一个（索引0）元素，

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

}

是数据数组的第二个（索引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。

静态数组声明和初始化

4 个答案: