javascript - 当对象在数组中时访问对象属性(javascript)

Question

我试图创建一个对象数组，然后访问该数组中的对象属性，但它返回未定义。我在执行 console.log(objArray[1]); 之后立即调用 createObjArray() 函数；它打印出对象及其所有属性。但是，如果我尝试执行 console.log(objArray[1].name); Firebug 打印“未定义”。此外，在 firebug 中单步执行我的代码时，我可以将鼠标悬停在 objArray[1].name 上，它会显示正确的名称。这里发生的事情让我抓狂。

var objArray = [];

function createObjectArray(numOfObjs) {

    for(var i=0; i<numOfObjs; i++) {

packages.push(initObj(i)); 

    }
 }

function initObj(i){
    var newPackage;
    var p = {};
    $.getJSON('.../package' + i + '.json', function(data) {
        newPackage = new Package(data);
        p.name = newPackage.name;
        p.id = i;      
    });
    return p;
 }

Answer 1

这会起作用:

var objArray = [];

function createObjectArray(numOfObjs, callback) {
    var filledPackage = [];
    var nbLeft = numOfObjs;
    for(var i=0; i<numOfObjs; i++) {
        initObj(i, function(p){
            filledPackage.push(p);
            nbLeft--;
            if (nbLeft === 0){
                callback(filledPackage);
            }
        }); 
    }
 }

function initObj(i, callback){
    var newPackage;
    var p = {};
    $.getJSON('.../package' + i + '.json', function(data) {
        newPackage = new Package(data);
        p.name = newPackage.name;
        p.id = i;     
        callback(p);
    });
}

//Get a filled object array:
createObjectArray(5, function(filledArray){
    objArray = filledArray;
    //Code here will be executed AFTER all the $.getJSON queries have returned.
    //objArray is not empty.
});
//Code here will be executed WHILE the getJSON queries are running and
//while objArray is still empty. Due to the way the JS event loop works,
//it is impossible that code placed here will be able to use the content
//of objArray unless you call an async function such as anything AJAX or
//setTimeout, but that's iffy. Code you want to be executed once objArray
//has been filled should be inside of the callback above.

问题是 $.getJSON 是异步的，这意味着它不会自动返回结果。相反，你给它一个回调。回调是在收到结果后执行的函数。在这种情况下，回调是调用 $.getJSON 时创建的匿名函数。该回调从服务器接收结果，将其添加到数组中，然后检查数组是否已填充。由于我们使用 $.getJSON 函数执行异步代码，因此我们也必须异步返回结果。为此，我们要求 initObj 函数在完成后接收要调用的函数(另一个回调)。我们调用该回调并将参数传递给它。然后我们再次通过回调返回填充的数组。