Bảng điều khiển JavaScript in giá trị được gán của biến trước khi nó được gán?

Question

Tôi bị nhầm lẫn sâu sắc bởi hành vi của JavaScript hoặc bảng điều khiển Chrome. Ai đó có thể giúp tôi hiểu không?

Về cơ bản tôi đã mã JavaScript sau, không lồng vào bên trong bất kỳ chức năng hoặc phạm vi khác:

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(); 

Tôi mong chờ COPIED 1 in [] - là biến chưa được gán chưa - nhưng thay vào đó nó in [2, 9, 8, 6, 0, 2, 1] - tức là giá trị sau khi nó được gán.

Tại sao?

Ngẫu nhiên, nếu bạn thay thế dòng 8-11 bằng initial_array = copied_array thì RESULTS 1 thực sự in là []. Có liên quan gì đến việc sử dụng .push không?

Answer 1

Hãy thử gỡ vấn đề của bạn trong trình gỡ lỗi script Chrome.Đặt điểm ngắt trên đường:

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

và bạn sẽ thấy hành vi mà bạn mong muốn.

Sự cố bạn đang gặp phải là bạn đang đưa ra giả định không chính xác rằng trình gỡ lỗi Chrome 'in' giá trị ngay lập tức khi thực tế nó không đồng bộ console.log. Kể từ khi mảng được thông qua xung quanh bằng cách tham khảo trong phụ trợ khi nó thực sự đi để in giá trị nó bây giờ là một trong những bạn đang nhìn thấy.

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(); 

Thêm dòng alert(copied_array.length); sẽ hiển thị kết quả chính xác.

Điều gì xảy ra là nhật ký không được đồng bộ hóa với thực thi javascript. Khi nhật ký in các giá trị đã được thay đổi.

Answer 3

Đó là cách các mảng được hiển thị trong bảng điều khiển Chrome và đó là theo tham chiếu. Nếu bạn muốn kết quả chính xác, chuyển đổi thành một chuỗi:

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(); 

Bạn có thể kiểm tra điều này ra khá dễ dàng:

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

Answer 4

Giao diện điều khiển là thực sự không đồng bộ. Bởi vì bạn đang đăng nhập một tham chiếu đến một đối tượng, vào thời điểm đối tượng được ghi lại nó đã thay đổi.

Bạn có thể sao chép mảng trước khi đăng nhập để chắc chắn rằng nó không bị thay đổi trước khi được ghi nhật ký.

Answer 5

Vì mảng được chuyển theo tham chiếu, mọi thay đổi bạn thực hiện với nó sẽ thay đổi đầu ra trong bảng điều khiển. Đó là một phần hành vi của bảng điều khiển của Chrome, một phần của JavaScript.

Nếu bạn muốn in kết quả tại thời điểm cuộc gọi đến console.log, bạn có thể xuất kết quả dưới dạng chuỗi sử dụng JSON.stringify.

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

chỉnh sửa quan trọng

Có vẻ như tôi đã chủ yếu là sai. Như diEcho được chỉ ra trong các nhận xét của câu hỏi, một similar question có một số better answer. Dường như chỉ là hành vi của Chrome.

Answer 6

là do copied_array là tham chiếu và console.log được thực thi theo cách đồng bộ, do đó nội dung của mảng được sửa đổi trước khi nhật ký đầu tiên in.

bạn có thể sao chép mảng trước khi in

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

Answer 7

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

Nên tốt để gỡ lỗi

---

đó là một BUG bạn đã đề cập, xem dưới đây

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

cũng đọc câu hỏi tương tự

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

Nếu bạn muốn giữ lại chức năng của giao diện điều khiển như mở rộng các đối tượng trong một mảng, tôi đề nghị sử dụng .slice, mà làm cho một bản sao của mảng mà không thay đổi khi đăng nhập :

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