控制台中的 JavaScript while 循环会打印额外的结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16826584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript while loop in console prints extra results
提问by fenderog
Can anyone explain why the following code works when run as part of function, but it produce strange result when run by itself in the Chrome Console window?
谁能解释为什么以下代码在作为函数的一部分运行时有效，但在 Chrome 控制台窗口中单独运行时会产生奇怪的结果？
var foo = function() {
var x = 1;
while (x<3) {
console.log(x);
x = x+1;
}
}
foo(); // This prints 1,2 as expected
But when I run just whilepart directly in Chrome Console I get 1,2,3 which makes no sense (see image for the output):
但是当我while直接在 Chrome 控制台中运行部分时，我得到 1,2,3 这没有任何意义（见输出图像）：
var y = 1;
while (y<3) {
console.log(y);
y = y+1;
}
// This prints 1,2,3 in the console
Note that there somewhat similar question about console.logresulting in undefined(Chrome/Firefox console.log always appends a line saying undefined), but there is no function call in my sample and whiledoes not ever return any value.
请注意，关于console.log导致undefined（Chrome/Firefox console.log 总是附加一行表示 undefined）有一些类似的问题，但我的示例中没有函数调用并且while永远不会返回任何值。
回答by Michael Geary
You are being misled by Chrome's JavaScript console.
你被 Chrome 的 JavaScript 控制台误导了。
In addition to the output of console.log()calls, the console also displays the value of the last expression executed in the code you run there.
除了console.log()调用的输出之外，控制台还显示您在那里运行的代码中执行的最后一个表达式的值。
In your first example, the last expression is the foo();call at the end. foo()doesn't return any value, so the result is undefinedand that's what's printed after the 1and 2that your console.log(y)calls print.
在您的第一个示例中，最后一个表达式是最后的foo();调用。foo()不返回任何值，所以结果是undefined，什么是后打印出的的1和2你console.log(y)通话打印。
In the second example, console.log()is still being called only twice, again printing 1and 2. The 3printed after that is not from a console.log()call, it's the value of the last expression executed, the final y = y + 1;that brings yup to 3and causes the whileloop to terminate.
在第二个例子中，console.log()仍然只被调用两次，再次打印1和2。在3打印后，从一个没有console.log()电话，它的执行，最后的最后一个表达式的值y = y + 1;带来y高达3并使while循环结束。
Here's another example. Paste this code into the console:
这是另一个例子。将此代码粘贴到控制台中：
var y = 1, message = '';
while( y < 3 ) {
console.log( y );
y = y + 1;
message = 'y is ' + y;
}
Now it prints:
现在它打印：
1
2
"y is 3"
The 1and 2are again from the console.log(y)calls as before. Like the other examples, after the code finishes running it prints the last expression executed—but now that expression is:
在1与2来自再次是console.log(y)电话前。与其他示例一样，在代码运行完成后，它会打印最后执行的表达式——但现在该表达式是：
message = 'y is ' + y;
where yis again 3at the end.
最后y又3在哪里。
Or a much simpler example. Enter this in the console:
或者更简单的例子。在控制台中输入：
console.log( 'Hi!' );
It prints:
它打印：
Hi!
undefined
The Hi!is your console.log()executing, and the undefinedis the return valueof the console.log()call.
该Hi!是你的console.log()执行，并undefined为返回值的的console.log()电话。
Another clue here is the little symbol to the left of the last value printed to the console in each of the examples. It looks like that symbol means that the dev tools are printing the value automatically instead of from a console.log()call.
这里的另一个线索是在每个示例中打印到控制台的最后一个值左侧的小符号。看起来那个符号意味着开发工具正在自动打印值，而不是从console.log()调用中打印。
回答by Isaac
It isn't just restricted to the console, as shown via:
它不仅限于控制台，如图所示：
<script>
console.log(eval("var y = 1;while (y<3) { console.log(y);y = y+1;}"))
</script>
That is a rough way to go about replicating the output, but it may be noted that evalwill preform in the same way
这是复制输出的粗略方法，但可能会注意到eval将以相同的方式执行
