控制台中的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 always appends a line saying undefined）的问题有些类似，但我的示例中没有函数调用，while也没有返回任何函数调用值。

Answer 1

您被Chrome的JavaScript控制台误导了。

除了console.log()调用的输出外，控制台还会显示在您运行的代码中执行的最后一个表达式的值。

在第一个示例中，最后一个表达式是最后的foo();调用。 foo()不会返回任何值，因此结果为undefined，这是1和2之后打印的console.log(y)调用打印的内容。

在第二个示例中，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将以相同的方式执行