Bảng điều khiển JavaScript của Chrome có lười biếng trong việc đánh giá mảng không?

Tôi sẽ bắt đầu với mã:

var s = ["hi"];
console.log(s);
s[0] = "bye";
console.log(s);

Đơn giản phải không? Đáp lại điều này, Fireorms nói:

["hi"]
["bye"]

Tuyệt vời, nhưng bảng điều khiển JavaScript của Chrome (7.0.517.41 beta) cho biết:

["bye"]
["bye"]

Tôi đã làm điều gì sai, hay bảng điều khiển JavaScript của Chrome đặc biệt lười biếng trong việc đánh giá mảng của tôi?

Cảm ơn các bình luận, tec. Tôi đã có thể tìm thấy một lỗi Webkit chưa được xác nhận hiện có giải thích vấn đề này: https://bugs.webkit.org/show_orms.cgi?id=35301 (EDIT: hiện đã được sửa!)

Dường như có một số tranh luận liên quan đến mức độ lỗi của nó và liệu nó có thể sửa được không. Nó có vẻ như hành vi xấu với tôi. Điều này đặc biệt gây rắc rối cho tôi bởi vì, trong Chrome ít nhất, nó xảy ra khi mã nằm trong các tập lệnh được thực thi ngay lập tức (trước khi trang được tải), ngay cả khi bảng điều khiển được mở, bất cứ khi nào trang được làm mới. Gọi console.log khi giao diện điều khiển chưa hoạt động chỉ dẫn đến một tham chiếu đến đối tượng đang được xếp hàng, chứ không phải đầu ra mà giao diện điều khiển sẽ chứa. Do đó, mảng (hoặc bất kỳ đối tượng nào), sẽ không được đánh giá cho đến khi bàn điều khiển sẵn sàng. Nó thực sự là một trường hợp đánh giá lười biếng.

Tuy nhiên, có một cách đơn giản để tránh điều này trong mã của bạn:

var s = ["hi"];
console.log(s.toString());
s[0] = "bye";
console.log(s.toString());

Bằng cách gọi toString, bạn tạo một biểu diễn trong bộ nhớ sẽ không bị thay đổi bởi các câu lệnh sau, bảng điều khiển sẽ đọc khi nó sẵn sàng. Đầu ra của bàn điều khiển hơi khác so với việc truyền trực tiếp đối tượng, nhưng có vẻ chấp nhận được:

hi
bye

Từ lời giải thích của Eric, đó là do console.log()được xếp hàng và nó in một giá trị sau của mảng (hoặc đối tượng).

Có thể có 5 giải pháp:

1. arr.toString()   // not well for [1,[2,3]] as it shows 1,2,3
2. arr.join()       // same as above
3. arr.slice(0)     // a new array is created, but if arr is [1, 2, arr2, 3] 
                    //   and arr2 changes, then later value might be shown
4. arr.concat()     // a new array is created, but same issue as slice(0)
5. JSON.stringify(arr)  // works well as it takes a snapshot of the whole array 
                        //   or object, and the format shows the exact structure

Bạn có thể sao chép một mảng với Array#slice:

console.log(s); // ["bye"], i.e. incorrect
console.log(s.slice()); // ["hi"], i.e. correct

Một chức năng mà bạn có thể sử dụng thay vì console.logkhông có vấn đề này như sau:

console.logShallowCopy = function () {
    function slicedIfArray(arg) {
        return Array.isArray(arg) ? arg.slice() : arg;
    }

    var argsSnapshot = Array.prototype.map.call(arguments, slicedIfArray);
    return console.log.apply(console, argsSnapshot);
};

Thật không may, đối với trường hợp của các đối tượng, không may, phương pháp tốt nhất xuất hiện trước tiên là gỡ lỗi với trình duyệt không phải WebKit hoặc viết một hàm phức tạp để sao chép. Nếu bạn chỉ làm việc với các đối tượng đơn giản, trong đó thứ tự các phím không quan trọng và không có chức năng, bạn luôn có thể thực hiện:

console.logSanitizedCopy = function () {
    var args = Array.prototype.slice.call(arguments);
    var sanitizedArgs = JSON.parse(JSON.stringify(args));

    return console.log.apply(console, sanitizedArgs);
};

Tất cả các phương thức này rõ ràng là rất chậm, do đó, thậm chí còn nhiều hơn so với các phương pháp bình thường console.log, bạn phải loại bỏ chúng sau khi bạn gỡ lỗi xong.

Điều này đã được vá trong Webkit, tuy nhiên khi sử dụng khung React, điều này xảy ra với tôi trong một số trường hợp, nếu bạn gặp vấn đề như vậy, hãy sử dụng như những người khác đề xuất:

console.log(JSON.stringify(the_array));

Điều này đã được trả lời, nhưng dù sao tôi cũng sẽ bỏ câu trả lời của mình. Tôi đã triển khai một trình bao bọc giao diện điều khiển đơn giản mà không gặp phải vấn đề này. Yêu cầu jQuery.

Nó chỉ thực hiện log, warnvà errorcác phương pháp, bạn sẽ có thêm một số chi tiết để cho nó được hoán đổi cho nhau với một thường xuyên console.

var fixedConsole;
(function($) {
    var _freezeOne = function(arg) {
        if (typeof arg === 'object') {
            return $.extend(true, {}, arg);
        } else {
            return arg;
        }
    };
    var _freezeAll = function(args) {
        var frozen = [];
        for (var i=0; i<args.length; i++) {
            frozen.push(_freezeOne(args[i]));
        }
        return frozen;
    };
    fixedConsole = {
        log: function() { console.log.apply(console, _freezeAll(arguments)); },
        warn: function() { console.warn.apply(console, _freezeAll(arguments)); },
        error: function() { console.error.apply(console, _freezeAll(arguments)); }
    };
})(jQuery);

Có vẻ như Chrome đang thay thế trong giai đoạn "biên dịch trước" bất kỳ trường hợp nào của "s" bằng con trỏ tới mảng thực tế.

Một cách xung quanh là bằng cách nhân bản mảng, đăng nhập bản sao mới thay thế:

var s = ["hi"];
console.log(CloneArray(s));
s[0] = "bye";
console.log(CloneArray(s));

function CloneArray(array)
{
    var clone = new Array();
    for (var i = 0; i < array.length; i++)
        clone[clone.length] = array[i];
    return clone;
}

giải pháp ngắn nhất cho đến nay là sử dụng cú pháp trải rộng mảng hoặc đối tượng để có được một bản sao các giá trị được bảo tồn như trong thời gian đăng nhập, tức là:

console.log({...myObject});
console.log([...myArray]);

tuy nhiên được cảnh báo vì nó là một bản sao nông, do đó, bất kỳ giá trị không nguyên thủy nào được lồng sâu sẽ không được sao chép và do đó được hiển thị ở trạng thái sửa đổi của chúng trong bảng điều khiển