控制台中的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

但是,当我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

请注意,有一些类似问题的console.log结果undefined(Chrome/Firefox console.log总是附加一行说未定义),但我的示例中没有函数调用,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()调用.