Странное поведение с объектами и console.log

Этот код:

foo = [{id: 1},{id: 2},{id: 3},{id: 4}, {id: 5}, ];
console.log('foo1', foo, foo.length);
foo.splice(2, 1);
console.log('foo2', foo, foo.length);

Создает следующий вывод в Chrome:

foo1 
[Object, Object, Object, Object, Object]  5
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]
     5 (index):23
foo2 
[Object, Object, Object, Object]  4
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]

Скрипка: http://jsfiddle.net/2kpnV/

Это почему?

Ответ 1

Исследование объектов через console.log происходит асинхронно. Консоль получает ссылку на объект синхронно, но не отображает свойства объекта до тех пор, пока он не будет раскрыт (в некоторых случаях, в зависимости от браузера и наличия инструментов dev, открытых при записи журнала). Если объект был изменен до проверки его в консоли, показанные данные будут иметь обновленные значения.

Например, Chrome немного покажет i в окне, которое при наведении курсора говорит:

Значение объекта слева было снято при регистрации, значение ниже было оценено только сейчас.

чтобы вы знали, на что вы смотрите.

Один из приемов регистрации в этих случаях заключается в регистрации отдельных значений:

console.log(obj.foo, obj.bar, obj.baz);

Или JSON кодирует ссылку на объект:

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

Ответ 2

Переопределение console.log решит проблему.

var originalLog = console.log;
console.log = function(obj) {
    originalLog(JSON.parse(JSON.stringify(obj)));
};

Ответ 3

Вы можете использовать setTimeout для запуска после модификации объекта.

setTimeout(() => console.log(this.daysOfTheYear), 0);