JavaScript控制台在分配变量之前打印分配的变量值？

Question

我对JavaScript或Chrome控制台的行为深感困惑。有人能帮助我理解吗？

基本上我有以下的JavaScript代码，而不是嵌套任何函数或其他范围内：

var initial_array = []; 

function initialiseArray() { 
    initial_array = [2, 9, 8, 6, 0, 2, 1]; 
} 

function copyToNewArray() { 
    var copied_array = []; 

    console.log("COPIED 1", copied_array); 

    for (var i = 0; i < initial_array.length; i++) { 
     var copy = initial_array[i]; 
     copied_array.push(copy); 
    } 

    console.log("COPIED 2", copied_array); 
} 

initialiseArray(); 
copyToNewArray(); 

我希望COPIED 1打印[] - 作为变量尚未分配的 - 而是它打印[2, 9, 8, 6, 0, 2, 1] - 即分配后的值。

为什么？顺便提一下，如果用initial_array = copied_array替换第8-11行，那么RESULTS 1确实打印为[]。这与使用.push有关吗？

Answer 1

尝试在Chrome浏览器的脚本调试调试你的问题之前，阵列复制。把一个断点放在线上：

for (var i = 0; i < initial_array.length; i++) { 

你会看到你所期望的行为。

您遇到的问题是您做出错误的假设，即Chrome调试器会立即“打印”该值，而事实上它是异步执行console.log。由于数组是通过后端的引用传递的，因此当它实际上打印值时，它现在就是您所看到的值。

Answer 2

var initial_array = []; 
function initialiseArray() { 
    initial_array = [2, 9, 8, 6, 0, 2, 1]; 
} 
function copyToNewArray() { 
    var copied_array = []; 
    console.log("COPIED 1", copied_array); 
    alert(copied_array.length); 
    for (var i = 0; i < initial_array.length; i++) { 
     var copy = initial_array[i]; 
     copied_array.push(copy); 
    } 
    console.log("COPIED 2", copied_array); 
} 
initialiseArray(); 
copyToNewArray(); 

添加行alert(copied_array.length);将显示正确的结果。

会发生什么情况是日志不与JavaScript执行同步。当日志打印时，值已经改变。

Answer 3

这是数组显示在Chrome控制台中的方式，这是通过引用。如果你想准确的结果，转换为字符串：

var initial_array = []; 

function initialiseArray() { 
    initial_array = [2, 9, 8, 6, 0, 2, 1]; 
} 

function copyToNewArray() { 
    var copied_array = []; 

    console.log("COPIED 1", copied_array.toString()); 

    for (var i = 0; i < initial_array.length; i++) { 
     var copy = initial_array[i]; 
     copied_array.push(copy); 
    } 

    console.log("COPIED 2", copied_array.toString()); 
} 

initialiseArray(); 
copyToNewArray(); 

你可以很容易地测试了这一点：

var x = []; 
console.log(x), x.push(5), x; // outputs [5] and [5] 

Answer 4

控制台实际上是异步的。因为你正在记录一个对象的引用，所以当对象被记录时它已经改变了。

您可以在记录之前克隆该数组，以确保它在记录之前不会被更改。

Answer 5

由于数组是通过引用传递的，所以每次对它进行的更改都会改变控制台中输出的内容。部分是Chrome的控制台，部分是JavaScript的行为。

如果您想在拨打console.log时打印结果，可以使用JSON.stringify作为字符串输出。

console.log("COPIED 1", JSON.stringify(copied_array)); 

重要编辑

看来我主要是错误的。由于diEcho在问题的评论中指出，similar question有一个better answer。这似乎只是Chrome的行为。

Answer 6

这是因为copied_array是一个引用，并且console.log是异步执行的，所以在第一个日志打印之前修改了该数组的内容。

你可以打印

console.log([].concat(copied_array)); 

Answer 7

console.log("COPIED 1", JSON.stringify(copied_array));

应该用于调试

---

这是你所提到的一个BUG被罚款，见下文

https://bugs.webkit.org/show_bug.cgi?id=35801

也看过类似的问题

Is Chrome's JavaScript console lazy about evaluating arrays?

Bizarre console.log behaviour in Chrome Developer Tools

Why does javascript object show different values in console in Chrome, Firefox, Safari?

Answer 8

如果你想保持控制台的功能，如在一个阵列扩展的对象，我建议使用.slice，登录时，其使不改变数组的副本：

console.log("COPIED 1", copied_array.slice());