控制台中的 JavaScript while 循環打印額外的結果

Question

誰能解釋為什么以下代碼在作為函數的一部分運行時有效，但在 Chrome 控制台窗口中自行運行時會產生奇怪的結果？

var foo = function() { 
    var x = 1;
    while (x<3) { 
        console.log(x);
        x = x+1;
    }
}

foo(); // This prints 1,2 as expected

但是，當我直接在 Chrome 控制台中運行while ，我得到 1,2,3，這是沒有意義的（參見輸出圖像）：

    var y = 1;
    while (y<3) { 
        console.log(y);
        y = y+1;
    }

    // This prints 1,2,3 in the console

請注意， console.log有一些類似的問題導致undefined （ Chrome/Firefox console.log 總是附加一行 undefined ），但是我的示例中沒有函數調用，並且while不會返回任何值。

Answer 1

你被 Chrome 的 JavaScript 控制台誤導了。

除了console.log()調用的輸出之外，控制台還顯示您在其中運行的代碼中執行的最后一個表達式的值。

在您的第一個示例中，最后一個表達式是foo(); 最后打電話。 foo()不返回任何值，因此結果是undefined的，這就是在您的console.log(y)調用 print 的1和2之后打印的內容。

在第二個示例中， console.log()仍然只被調用了兩次，再次打印1和2 。 之后打印的3不是來自console.log()調用，它是最后執行的表達式的值，最后的y = y + 1; 這使y達到3並導致while循環終止。

這是另一個例子。 將此代碼粘貼到控制台中：

var y = 1, message = '';
while( y < 3 ) { 
    console.log( y );
    y = y + 1;
    message = 'y is ' + y;
}

現在它打印：

1
2
"y is 3"

1和2再次像以前一樣來自console.log(y)調用。 與其他示例一樣，在代碼完成運行后，它會打印最后一個執行的表達式——但現在該表達式是：

message = 'y is ' + y;

其中y最后又是3 。

或者一個更簡單的例子。 在控制台中輸入：

console.log( 'Hi!' );

它打印：

Hi!
undefined

Hi! 是您的console.log()正在執行，而undefined是console.log()調用的返回值。

這里的另一個線索是每個示例中打印到控制台的最后一個值左側的小符號。 看起來該符號意味着開發工具正在自動打印該值，而不是從console.log()調用。

Answer 2

它不僅限於控制台，如下所示：

<script>
console.log(eval("var y = 1;while (y<3) { console.log(y);y = y+1;}"))
</script>

這是復制輸出的一種粗略方法，但可能會注意到eval將以相同的方式執行