Czy konsola JavaScript przeglądarki Chrome jest leniwa w ocenie tablic?

Zacznę od kodu:

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

Proste, prawda? W odpowiedzi na to Firebug mówi:

["hi"]
["bye"]

Cudownie, ale konsola JavaScript Chrome (7.0.517.41 beta) mówi:

["bye"]
["bye"]

Czy zrobiłem coś nie tak, czy też konsola JavaScript Chrome jest wyjątkowo leniwa w ocenie mojej tablicy?

Dzięki za komentarz, tec. Udało mi się znaleźć istniejący niepotwierdzony błąd Webkita, który wyjaśnia ten problem: https://bugs.webkit.org/show_bug.cgi?id=35801 (EDYCJA: teraz naprawiona!)

Wydaje się, że trwa dyskusja na temat tego, jak bardzo jest to błąd i czy można go naprawić. Wydaje mi się, że to złe zachowanie. Było to dla mnie szczególnie niepokojące, ponieważ przynajmniej w Chrome występuje, gdy kod znajduje się w skryptach, które są wykonywane natychmiast (przed załadowaniem strony), nawet gdy konsola jest otwarta, za każdym razem, gdy strona jest odświeżana. Wywołanie polecenia console.log, gdy konsola nie jest jeszcze aktywna, powoduje jedynie odniesienie do obiektu znajdującego się w kolejce, a nie wyjście, które będzie zawierać konsola. Dlatego tablica (lub dowolny obiekt) nie będzie oceniana, dopóki konsola nie będzie gotowa. To naprawdę jest przypadek leniwej oceny.

Istnieje jednak prosty sposób, aby tego uniknąć w kodzie:

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

Wywołując toString, tworzysz reprezentację w pamięci, która nie zostanie zmieniona przez następujące instrukcje, które konsola odczyta, gdy będzie gotowa. Wynik konsoli różni się nieco od bezpośredniego przekazywania obiektu, ale wydaje się akceptowalny:

hi
bye

Z wyjaśnień Erica wynika, że ​​jest console.log()to kolejka do kolejki i drukuje późniejszą wartość tablicy (lub obiektu).

Może być 5 rozwiązań:

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

Możesz sklonować tablicę za pomocą Array#slice:

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

Funkcja, której możesz użyć zamiast niej console.log, nie ma tego problemu, jest następująca:

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

W przypadku obiektów, niestety, najlepszą metodą wydaje się być debugowanie najpierw za pomocą przeglądarki innej niż WebKit lub napisanie skomplikowanej funkcji do sklonowania. Jeśli pracujesz tylko z prostymi obiektami, w których kolejność klawiszy nie ma znaczenia i nie ma żadnych funkcji, zawsze możesz zrobić:

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

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

Wszystkie te metody są oczywiście bardzo wolne, więc nawet bardziej niż w przypadku zwykłych metod console.log, musisz je usunąć po zakończeniu debugowania.

Zostało to załatane w Webkit, jednak podczas korzystania z frameworka React zdarza się to w niektórych okolicznościach, jeśli masz takie problemy, po prostu użyj, jak sugerują inni:

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

To już odpowiedź, ale i tak odrzucę odpowiedź. Zaimplementowałem prosty wrapper konsoli, który nie cierpi z powodu tego problemu. Wymaga jQuery.

Implementuje tylko log, warna errormetody, trzeba będzie dodać trochę więcej, aby mogła ona być stosowane zamiennie z regularnym 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);

Wygląda na to, że Chrome zastępuje w fazie „prekompilacji” dowolne wystąpienie litery „s” wskaźnikiem do rzeczywistej tablicy.

Jednym ze sposobów jest sklonowanie tablicy i zarejestrowanie nowej kopii:

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

jak dotąd najkrótszym rozwiązaniem jest użycie tablicy lub składni rozproszenia obiektów w celu uzyskania klonu wartości, które mają być zachowane w czasie logowania, tj .:

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

należy jednak uważać, ponieważ robi to płytką kopię, więc wszelkie głęboko zagnieżdżone wartości niebędące prymitywami nie zostaną sklonowane i tym samym wyświetlone w zmodyfikowanym stanie w konsoli