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() {...})

并且您应该只希望在事件发生时执行。