Apakah konsol JavaScript Chrome malas mengevaluasi array?

Saya akan mulai dengan kode:

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

Sederhana bukan? Menanggapi ini, Firebug mengatakan:

["hi"]
["bye"]

Luar biasa, tetapi konsol JavaScript Chrome (7.0.517.41 beta) mengatakan:

["bye"]
["bye"]

Apakah saya telah melakukan kesalahan, atau apakah konsol JavaScript Chrome terlalu malas mengevaluasi array saya?

Terima kasih atas komentarnya, tec. Saya dapat menemukan bug Webkit yang belum dikonfirmasi yang menjelaskan masalah ini: https://bugs.webkit.org/show_bug.cgi?id=35801 (EDIT: sekarang sudah diperbaiki!)

Tampaknya ada beberapa perdebatan mengenai seberapa banyak bug itu dan apakah itu dapat diperbaiki. Bagi saya, ini sepertinya perilaku yang buruk. Ini sangat mengganggu saya karena, setidaknya di Chrome, ini terjadi ketika kode berada dalam skrip yang dijalankan segera (sebelum halaman dimuat), bahkan ketika konsol terbuka, setiap kali halaman di-refresh. Memanggil console.log saat konsol belum aktif hanya menghasilkan referensi ke objek yang diantrekan, bukan keluaran yang akan dimuat di konsol. Oleh karena itu, array (atau objek apa pun), tidak akan dievaluasi hingga konsol siap. Ini benar-benar kasus evaluasi malas.

Namun, ada cara sederhana untuk menghindari hal ini di kode Anda:

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

Dengan memanggil toString, Anda membuat representasi dalam memori yang tidak akan diubah dengan pernyataan berikut, yang akan dibaca konsol ketika sudah siap. Output konsol sedikit berbeda dengan meneruskan objek secara langsung, tetapi tampaknya dapat diterima:

hi
bye

Dari penjelasan Eric, itu karena console.log() antrian, dan mencetak nilai selanjutnya dari array (atau objek).

Ada 5 solusi:

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

Anda dapat mengkloning sebuah array dengan Array#slice:

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

Fungsi yang dapat Anda gunakan sebagai ganti console.logyang tidak memiliki masalah ini adalah sebagai berikut:

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

Untuk kasus objek, sayangnya, metode terbaik tampaknya men-debug terlebih dahulu dengan browser non-WebKit, atau menulis fungsi rumit untuk dikloning. Jika Anda hanya bekerja dengan objek sederhana, di mana urutan tombol tidak menjadi masalah dan tidak ada fungsi, Anda selalu dapat melakukan:

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

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

Semua metode ini jelas sangat lambat, jadi bahkan lebih daripada dengan metode normal console.log, Anda harus menghapusnya setelah Anda selesai debugging.

Ini telah ditambal di Webkit, namun ketika menggunakan kerangka kerja React, ini terjadi pada saya dalam beberapa keadaan, jika Anda memiliki masalah seperti itu, gunakan saja seperti yang disarankan orang lain:

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

Ini sudah dijawab, tetapi saya akan membatalkan jawaban saya. Saya menerapkan pembungkus konsol sederhana yang tidak mengalami masalah ini. Membutuhkan jQuery.

Ini hanya mengimplementasikan log , warndan errormetode, Anda harus menambahkan lebih banyak agar dapat dipertukarkan dengan reguler 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);

Sepertinya Chrome sedang mengganti dalam fase "pra-kompilasi" setiap instance "s" dengan pointer ke larik sebenarnya.

Salah satu cara mengatasinya adalah dengan mengkloning larik, sebagai gantinya mencatat salinan baru:

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;
}

solusi terpendek sejauh ini adalah menggunakan sintaks array atau penyebaran objek untuk mendapatkan klon nilai yang akan dipertahankan seperti pada saat logging, yaitu:

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

Namun berhati-hatilah karena ini melakukan penyalinan yang dangkal, sehingga nilai non-primitif bersarang yang dalam tidak akan dikloning dan karenanya ditampilkan dalam status modifikasinya di konsol