O console JavaScript do Chrome é preguiçoso ao avaliar matrizes?

Vou começar com o código:

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

Simples, certo? Em resposta a isso, o Firebug diz:

["hi"]
["bye"]

Maravilhoso, mas o console JavaScript do Chrome (7.0.517.41 beta) diz:

["bye"]
["bye"]

Fiz algo errado ou o console JavaScript do Chrome é excepcionalmente preguiçoso ao avaliar minha matriz?

Obrigado pelo comentário, tec. Consegui encontrar um bug do Webkit não confirmado existente que explica esse problema: https://bugs.webkit.org/show_bug.cgi?id=35801 (EDIT: agora corrigido!)

Parece haver algum debate sobre o quanto de um bug é e se é corrigível. Parece um mau comportamento para mim. Foi especialmente preocupante para mim porque, pelo menos no Chrome, ocorre quando o código reside em scripts executados imediatamente (antes do carregamento da página), mesmo quando o console é aberto, sempre que a página é atualizada. Chamar console.log quando o console ainda não está ativo resulta apenas em uma referência ao objeto na fila, não na saída que o console conterá. Portanto, a matriz (ou qualquer objeto) não será avaliada até que o console esteja pronto. É realmente um caso de avaliação preguiçosa.

No entanto, existe uma maneira simples de evitar isso em seu código:

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

Ao chamar toString, você cria uma representação na memória que não será alterada pelas instruções a seguir, que o console lerá quando estiver pronto. A saída do console é um pouco diferente de passar o objeto diretamente, mas parece aceitável:

hi
bye

Pela explicação de Eric, é devido à console.log()fila e imprime um valor posterior da matriz (ou objeto).

Pode haver 5 soluções:

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

Você pode clonar uma matriz com Array#slice:

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

Uma função que você pode usar em vez de console.lognão ter esse problema é a seguinte:

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

Infelizmente, para o caso de objetos, o melhor método parece ser depurar primeiro com um navegador que não seja o WebKit ou escrever uma função complicada para clonar. Se você estiver trabalhando apenas com objetos simples, onde a ordem das chaves não importa e não há funções, você sempre pode:

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

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

Todos esses métodos são obviamente muito lentos; portanto, mais do que com os console.logs normais , você precisa removê-los depois de concluir a depuração.

Isso foi corrigido no Webkit, no entanto, ao usar a estrutura React, isso acontece comigo em algumas circunstâncias, se você tiver esses problemas, use o que outros sugerem:

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

Isso já foi respondido, mas deixarei minha resposta de qualquer maneira. Eu implementei um wrapper de console simples que não sofre com esse problema. Requer jQuery.

Ele implementa apenas log, warne errormétodos, você precisará adicionar um pouco mais para que seja intercambiável com um regular 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);

Parece que o Chrome está substituindo na fase "pré-compilação" qualquer instância de "s" por ponteiro para a matriz real.

Uma maneira de contornar é clonar a matriz, registrando uma nova cópia:

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

a solução mais curta até agora é usar a sintaxe de dispersão de matriz ou objeto para obter um clone de valores a serem preservados como no momento do registro, ou seja:

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

no entanto, seja avisado como faz uma cópia superficial, para que quaisquer valores não primitivos aninhados profundos não sejam clonados e mostrados em seu estado modificado no console