¿Es floja la consola JavaScript de Chrome para evaluar matrices?

Comenzaré con el código:

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

Simple, ¿verdad? En respuesta a esto, Firebug dice:

["hi"]
["bye"]

Maravilloso, pero la consola JavaScript de Chrome (7.0.517.41 beta) dice:

["bye"]
["bye"]

¿He hecho algo mal o la consola JavaScript de Chrome está siendo extremadamente floja al evaluar mi matriz?

Gracias por el comentario, tec. Pude encontrar un error existente de Webkit no confirmado que explica este problema: https://bugs.webkit.org/show_bug.cgi?id=35801 (EDITAR: ¡ahora solucionado!)

Parece haber cierto debate sobre cuánto de un error es y si es reparable. Me parece un mal comportamiento. Fue especialmente preocupante para mí porque, al menos en Chrome, ocurre cuando el código reside en scripts que se ejecutan inmediatamente (antes de que se cargue la página), incluso cuando la consola está abierta, cada vez que se actualiza la página. Llamar a console.log cuando la consola aún no está activa solo da como resultado una referencia al objeto que está en cola, no el resultado que contendrá la consola. Por lo tanto, la matriz (o cualquier objeto) no se evaluará hasta que la consola esté lista. Realmente es un caso de evaluación perezosa.

Sin embargo, hay una manera simple de evitar esto en su código:

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

Al llamar a toString, crea una representación en la memoria que no se verá alterada por las siguientes declaraciones, que la consola leerá cuando esté lista. La salida de la consola es ligeramente diferente de pasar el objeto directamente, pero parece aceptable:

hi
bye

Según la explicación de Eric, se debe a que console.log()está en cola e imprime un valor posterior de la matriz (u objeto).

Puede haber 5 soluciones:

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

Puede clonar una matriz con Array#slice:

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

Una función que puede usar en lugar de console.logque no tenga este problema es la siguiente:

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

Para el caso de los objetos, desafortunadamente, el mejor método parece ser depurar primero con un navegador que no sea WebKit, o escribir una función complicada para clonar. Si solo está trabajando con objetos simples, donde el orden de las teclas no importa y no hay funciones, siempre puede hacer lo siguiente:

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

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

Obviamente, todos estos métodos son muy lentos, por lo que incluso más que con los console.logs normales , debe quitarlos después de que haya terminado la depuración.

Esto se ha parcheado en Webkit, sin embargo, cuando uso el marco React, esto me sucede en algunas circunstancias, si tiene tales problemas, simplemente use como otros sugieren:

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

Esto ya está respondido, pero de todos modos dejaré mi respuesta. Implementé un contenedor de consola simple que no sufre este problema. Requiere jQuery.

Solo implementa log, warny los errormétodos, tendrá que agregar un poco más para que sea intercambiable con un 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 Chrome está reemplazando en su fase de "precompilación" cualquier instancia de "s" con un puntero a la matriz real.

Una forma de evitarlo es clonando la matriz, registrando una copia nueva en su lugar:

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 solución más corta hasta el momento es utilizar una sintaxis de matriz o de dispersión de objetos para obtener un clon de valores que se conservarán en el momento del registro, es decir:

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

Sin embargo, tenga en cuenta que se trata de una copia superficial, por lo que los valores no primitivos anidados profundos no se clonarán y, por lo tanto, se mostrarán en su estado modificado en la consola