La console JavaScript di Chrome è pazza di valutare array?

Inizierò con il codice:

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

Semplice vero? In risposta a ciò, Firebug dice:

["hi"]
["bye"]

Meravigliosa, ma la console JavaScript di Chrome (7.0.517.41 beta) dice:

["bye"]
["bye"]

Ho fatto qualcosa di sbagliato o la console JavaScript di Chrome è eccezionalmente pigra nel valutare il mio array?

Grazie per il commento, tec. Sono stato in grado di trovare un bug Webkit non confermato esistente che spiega questo problema: https://bugs.webkit.org/show_bug.cgi?id=35801 (EDIT: ora risolto!)

Sembra esserci un dibattito su quanto sia un bug e se sia risolvibile. Mi sembra un cattivo comportamento. Mi è stato particolarmente preoccupante perché, almeno in Chrome, si verifica quando il codice risiede negli script eseguiti immediatamente (prima che la pagina venga caricata), anche quando la console è aperta, ogni volta che la pagina viene aggiornata. Chiamare console.log quando la console non è ancora attiva comporta solo un riferimento all'oggetto in coda, non all'output che la console conterrà. Pertanto, l'array (o qualsiasi oggetto) non verrà valutato fino a quando la console non sarà pronta. È davvero un caso di valutazione pigra.

Tuttavia, esiste un modo semplice per evitarlo nel codice:

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

Chiamando toString, si crea una rappresentazione in memoria che non verrà modificata dalle seguenti istruzioni, che la console leggerà quando sarà pronta. L'output della console è leggermente diverso dal passare direttamente l'oggetto, ma sembra accettabile:

hi
bye

Dalla spiegazione di Eric, è dovuto console.log()all'accodamento e stampa un valore successivo dell'array (o dell'oggetto).

Ci possono essere 5 soluzioni:

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

Puoi clonare un array con Array#slice:

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

Una funzione che è possibile utilizzare al posto di console.logquesto non presenta questo problema è la seguente:

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

Nel caso degli oggetti, sfortunatamente, il metodo migliore sembra essere quello di eseguire prima il debug con un browser non WebKit o di scrivere una funzione complicata per clonare. Se lavori solo con oggetti semplici, dove l'ordine dei tasti non ha importanza e non ci sono funzioni, puoi sempre fare:

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

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

Tutti questi metodi sono ovviamente molto lenti, quindi anche più che con normali console.logs, devi toglierli dopo aver eseguito il debug.

Questo è stato corretto in Webkit, tuttavia quando si utilizza il framework React ciò accade in alcune circostanze, se si hanno tali problemi basta usare come altri suggeriscono:

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

Questa è già una risposta, ma lascerò comunque la mia risposta. Ho implementato un semplice wrapper per console che non soffre di questo problema. Richiede jQuery.

Esso implementa solo log, warne errormetodi, si dovrà aggiungere un po 'di più per per essere intercambiabile con un normale 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);

Sembra che Chrome stia sostituendo nella sua fase di "pre-compilazione" qualsiasi istanza di "s" con un puntatore all'array reale.

Un modo per aggirare è clonare l'array, registrando invece una nuova copia:

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

la soluzione più breve finora è usare la sintassi di diffusione di array o oggetti per ottenere un clone di valori da conservare come al momento della registrazione, ovvero:

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

tuttavia, ti avvisa come fa una copia superficiale, quindi qualsiasi valore non primitivo annidato in profondità non verrà clonato e quindi mostrato nel suo stato modificato nella console