Javascript / Jquery object.array.push（）

Question

我是js編程的新手，我遇到了一些問題。 這個例子是我的問題的瑣碎化。 功能如下：

function sendOrder(){

    var someObject = {items:[]}; 

    $(document).ready(function(){               
        // pushing some item to array in object
        someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"});  
    });  

    // pushing second item to array in object
    someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"});    

    console.log(JSON.stringify(someObject)); //print object
}

控制台的結果是：

{"items":[{"Name":"Lemon","Quantity":3,"OrderUnit":"kg"}]}

我的問題是：為什么檸檬被推入對象數組而橙不被推？

Answer 1

console.log顯示了數組的實際狀態，但是由於document尚未准備好並且尚未推送Orange對象，因此它僅顯示Lemon對象。

您可以例如添加具有1ms延遲的setTimeout函數，以使console.log等待頁面加載並執行兩個分配。

注意 ：最好的選擇就是擺脫該功能，因為它是不必要的。

 function sendOrder() { var someObject = { items: [] }; $(document).ready(function() { someObject.items.push({ Name: "Orange", Quantity: 2, OrderUnit: "kg" }); //pushing some item to array in object }); someObject.items.push({ Name: "Lemon", Quantity: 3, OrderUnit: "kg" }); //pushing second item to array in object setTimeout(() => { console.log(someObject); //print object }, 1); } sendOrder(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

如果您立即從script元素調用sendOrder ，則它將在DOM通知文檔准備就緒之前執行。 這也是在執行console.log調用時。

在另一方面，你傳遞給函數$(document).ready( ... )才會被執行后 ，當DOM通知，該文件已加載。 然后，該項目也將添加到您的數組中，但這為時已晚，無法由已經執行的console.log顯示。

在傳遞給$(document).ready的回調函數的末尾移動console.log ，或者push移出那里，以便在顯示結果之前發生兩次push 。 在第一種情況下，順序將與您期望的相反。

Answer 3

我假設console.log在執行Orange push命令之前正在運行。 使用$ document.ready.function時，它將等待直到整個頁面加載完畢，然后再執行該函數中的代碼。 因此，document.ready.function之外的代碼將在document.ready.function中的代碼執行之前運行。

Answer 4

Orange也位於數組中，問題在於console.log在添加之前已執行。 如果在橙色后面添加另一個console.log，則可以看到此信息。

 function sendOrder(){ var someObject = {items:[]}; $(document).ready(function(){ someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"}); //pushing some item to array in object console.log(JSON.stringify(someObject)); }); someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"}); //pushing second item to array in object console.log(JSON.stringify(someObject)); //print object } sendOrder(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 5

沒有立即調用document.ready的回調。 加載文檔時即日志發生后調用。 這是發生的情況的示例：

 var arr = []; setTimeout(function() { arr.push("orange"); // will be pushed but after a second }, 1000); arr.push("apple"); // pushed right away (as a matter of fact pushed firstly because the above one is not evaluated so "orange" is not yet pushed console.log("First Log: ", arr); // logged right away (before "orange" is pushed) // Wait 2 second then log the array again setTimeout(function() { console.log("Delayed Log: ", arr); // enough time has passed (both "apple" and "orange" are pushed) }, 2000); 

Answer 6

保持document.ready功能，最好等到頁面處於穩定狀態后再進行編碼。 而是將console.log移到document.ready中，屆時您將看到兩個對象。

 function sendOrder(){ var someObject = {items:[]}; $(document).ready(function(){ someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"}); //pushing some item to array in object console.log(JSON.stringify(someObject)); //print object }); someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"}); //pushing second item to array in object } 

Answer 7

這個

$(document).ready(function() {...})

只是將一個功能設置為一旦文檔准備好就執行，而不會立即執行。 您可以使用類似的形式來響應對元素的點擊，如下所示：

$("#some-element").click(function() {...})

並且您應該只希望在事件發生時執行。