Javascript 数组未返回正确的长度

Question

这可能是非常愚蠢的事情，但我一生都看不到它。

我有用字符串填充数组的代码，然后想要循环遍历该数组并将值添加到选择控件中作为选项。但由于某种原因，当我调用 length 属性时，它返回 0，但如果我使用 console.dir 在控制台中显示数组，它就会包含数据。

代码如下:

var sectors = new Array();
// code to add values 
$.getJSON("get/tech_info.php", {uid:json.uid}, function(data){

    $.each(data, function(i, json){
        if($.inArray(json.area, sectors) == -1)
        {
            sectors[sectors.length] = json.area;
        }
    });
});


console.dir(sectors);

var sec = "#mainSectors" + count;
console.log(sectors.length); // returning 0
for ( var i=0; i != sectors.length; i++ ){

    console.log("bla bla bla");
    $(sec).append(
        $("<option></option>").html(sectors[i])
    );
}

这是 cosole.dir 数据，您可以看到有数据:

//secotrs
Array[0]
0: "Industrial"
1: "Commercial"
length: 2
__proto__: Array[0]

Answer 1

您正在发起 Ajax 调用。 Ajax 是异步!调用后的代码(for 循环)在执行回调之前运行(并且填充数组)。

将所有依赖于sectors的代码放入回调中:

var sectors = [];

$.getJSON("get/tech_info.php", {uid:json.uid}, function(data){

    $.each(data, function(i, json){
        if($.inArray(json.area, sectors) == -1)
        {
            sectors.push(json.area);
        }
    });

    var sec = "#mainSectors" + count;
    console.log(sectors.length); //
    for ( var i=0; i != sectors.length; i++ ){

        console.log("bla bla bla");
        $(sec).append(
            $("<option></option>").html(sectors[i])
        );
    }

});

<小时/>

更新:

关于console.dir的输出:正如我所假设的那样。当您在控制台中展开条目时(而不是进行调用时)会获取对象的属性。

示例:

> a = [];
  []
> console.dir(a)
  ▸ Array[0]
    undefined
> a.push(5)
  1

当我现在单击 Array[0] 旁边的标记时，我得到:

▾ Array[0]
   0: 5
   length: 1
  ▸ __proto__: Array[0]

人们期望它不显示0: 5，因为它是稍后添加的(在console.dir调用之后)。