如何解决Javascript数组丢失数据的问题？

我在通过ajax调用将信息放入数组时遇到麻烦，如果我在将信息插入数组后立即提醒信息，它就可以正常工作，但是如果最后执行此操作，则它会提示信息不明。

            var books = [];
        $.ajax({
               url: 'getFolderContents.php',
               dataType: 'json',
               success: function (data)
               {       
                    for(var i=0;i<data.length;i++) {
                        var amm = 0;
                        if(data[i].indexOf(".epub") !== -1) {
                            //$('#bTable').append("<td><a id = '" + data[i] + "' href = 'book.html'><img src = 'book.png' width = '100px'/><br/>" + data[i] + "</a></td>");
                            books.push(data[i]);
                            //alert(books[0]) Works if I call it from here, but not at the end.
                        }
                    }
               },
               error: function()
               {
                alert("error");
               }
        });
        alert(books[0]);

Your AJAX call is asynchronous, that's why it is undefined.

Your

alert(books[0]);

will be executed while the Ajax call is running and therefore will not have any elements at this point of execution yet. Ajax is asynchronous - while you are doing a request to your PHP script your script continues execution.

Put all actions with books in your success function.

Another hint: As of jQuery version 1.8 you cannot longer use the parameter async: false to create a synchronous "A"jax call. You have to use the callback functions. Have a look at the docs for $.ajax

Your array hasn't lost any data; the data hasn't been put in there yet. The 'A' stands for "asynchronous", meaning your success callback hasn't run yet at the time you call the alert.

Put the alert inside your callback instead:

        success: function (data)
           {       
                for(var i=0;i<data.length;i++) {
                    var amm = 0;
                    if(data[i].indexOf(".epub") !== -1) {
                        //$('#bTable').append("<td><a id = '" + data[i] + "' href = 'book.html'><img src = 'book.png' width = '100px'/><br/>" + data[i] + "</a></td>");
                        books.push(data[i]);
                        //alert(books[0]) Works if I call it from here, but not at the end.
                    }
                }
                alert(books[0]);
           },

The alert at the end happens before the ajax success callback, because ajax is asynchronous.

Your alert is executing before the success function is called. Perhaps seeing the same code using a promise will make things clearer.

$.ajax( url: 'getFolderContents.php',  dataType: "json"  )
 //the then function's first argument is the success handler  
  .then(function( data ) {

       for(var i=0;i<data.length;i++) {
                        var amm = 0;
                        if(data[i].indexOf(".epub") !== -1) {
                            //$('#bTable').append("<td><a id = '" + data[i] + "' href =                     'book.html'><img src = 'book.png' width = '100px'/><br/>" + data[i] + "</a></td>");
                            books.push(data[i]);
                            //alert(books[0]) Works if I call it from here, but not at the end.
                        }

 alert(books[0]
                    });

});

I always feel this syntax makes async stuff make more sense. Otherwise this code functions exactly like Blazemonger's correct answer.