Чи ленача консоль JavaScript Chrome щодо оцінювання масивів?

Почну з коду:

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

Просте, правда? У відповідь на це Firebug каже:

["hi"]
["bye"]

Чудово, але консоль JavaScript Chrome (7.0.517.41 бета) говорить:

["bye"]
["bye"]

Я щось зробив не так, або ж консоль JavaScript Chrome надзвичайно ледача щодо оцінки мого масиву?

Дякую за коментар, tec. Мені вдалося знайти непоцверджену помилку Webkit, яка пояснює цю проблему: https://bugs.webkit.org/show_bug.cgi?id=35801 (EDIT: тепер виправлено!)

Здається, виникають дебати щодо того, скільки саме помилки є і чи можна її виправити. Мені це здається поганою поведінкою. Мене це особливо хвилювало, оскільки, принаймні, у Chrome це відбувається, коли код знаходиться у скриптах, які виконуються негайно (перед завантаженням сторінки), навіть коли консоль відкрита, щоразу, коли сторінка оновлюється. Виклик console.log, коли консоль ще не активний, призводить лише до посилання на об'єкт, що знаходиться в черзі, а не вихід, який консоль міститиме. Тому масив (або будь-який об'єкт) не буде оцінено, поки консоль не буде готова. Це справді випадок лінивої оцінки.

Однак у вашому коді є простий спосіб уникнути цього:

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

Викликаючи toString, ви створюєте представлення в пам'яті, яке не буде змінено наступними твердженнями, яке консоль прочитає, коли буде готова. Вихід консолі дещо відрізняється від передачі об'єкта безпосередньо, але здається прийнятним:

hi
bye

З пояснення Еріка, це пов’язано з console.log()чергою, і він друкує пізніше значення масиву (або об'єкта).

Тут може бути 5 рішень:

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

Ви можете клонувати масив за допомогою Array#slice:

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

Функція, яку ви можете використовувати замість цієї console.log, не має цієї проблеми, полягає в наступному:

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

На жаль, у випадку об'єктів, на жаль, найкращим методом видається налагодження спочатку в браузері, що не WebKit, або написання складної функції для клонування. Якщо ви працюєте лише з простими об'єктами, де порядок клавіш не має значення і немає функцій, ви завжди можете робити:

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

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

Усі ці методи, очевидно, дуже повільні, тому навіть більше, ніж при звичайних console.log, вам доведеться позбавити їх після того, як ви закінчите налагодження.

Це було зафіксовано у Webkit, однак при використанні рамки React це відбувається у мене за деяких обставин, якщо у вас є такі проблеми, просто використовуйте, як пропонують інші:

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

На це вже відповіли, але я все одно кину свою відповідь. Я реалізував просту консольну обгортку, яка не страждає від цього питання. Потрібен jQuery.

Він реалізує тільки log, warnі errorметоди, вам доведеться додати ще трохи для того , щоб бути взаємозамінними з регулярним 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);

Схоже, Chrome замінює у фазі "попередньої компіляції" будь-який екземпляр "s" вказівником на фактичний масив.

Один із способів - клонувати масив, замість цього записати свіжу копію:

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

найкоротше рішення поки що - використовувати синтаксис масиву або синтаксис розповсюдження об'єкта, щоб отримати клон значень, який зберігається як під час реєстрації, тобто:

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

однак попередити, як це робиться неглибока копія, тому будь-які глибоко вкладені непомітивні значення не будуть клоновані і, таким чином, відображатимуться у зміненому стані у консолі