Автор оригинала: FreeCodeCamp Community Member.
Борисом Север
Многие разработчики не используют отладчик при разработке. Вместо этого они полагаются на своего старого друга console.log () Отказ
Важно отметить, что консоль показывает значение объекта, которое оценивается во время Первая экспансия в консоли.
Во-первых, позвольте мне уточнить, что я имею в виду под расширением. Когда мы console.log Объект (который также охватывает массивы также), значение объекта рухнуло. Например:
Console.log («пользователи:», [{имя: «Джон»}]);
Консоль браузера будет выглядеть так:
Затем, когда вы нажимаете на треугольник, объект расширяется. В то точное время значение объекта оценивается и отображается.
Давайте погрузимся больше в это и проверьте пример:
На линии 1 мы инициализируем новый Пользователи Переменная, которая является массивом объектов.
На линии 6 мы пишем значение Пользователи Переменная к консоли.
Далее мы переживаем через Пользователи , проверьте, действительно ли пользователь, и в зависимости от возврата мы отключаем пользователя. Ради аргумента, давайте предположим, что ValidateUser () Возвращает ложь И код на линии 10 выполняется.
Хотя …| карта Создает новый массив, изменяя Пользователь Объект также меняется Пользователь объект в Пользователи множество. Это меняется, потому что он имеет такую же ссылку. (Для лучшего объяснения того, что происходит, проверить Эта статья ).
Вопрос в том, что будет показано в консоли, которая называется в строке 6?
Когда мы открываем этот пример в Chrome и Firefox, объект рухнул. Затем после расширения мы видим значения:
Включено установлено на ложь хотя значение было правда во время вывода. Причина этого состоит в том, что значение объекта оценивается в первый раз, когда мы нажимаем, чтобы расширить объект (Lazy Read).
Давайте теперь посмотрим на Safari:
HM, включен, установлен на true. Таким образом, мы видим, что существуют некоторые несоответствия между браузерами. Safari попытается автоматически расширить объект. Если объект/массив слишком велик, он будет рухнуть и вести себя так же, как Chrome и Firefox.
Один из способов обойти это использовать Json.stringify (), например Console.log («пользователи», JSON.Stringify (пользователи, NULL, 2));
который будет производить следующий вывод на консоль:
К сожалению, с таким подходом вы не можете расширить/свернуть объект. Значение не будет мутировано.
Я большой поклонник функциональной парадигмы программирования и неизменных переменных. Чтобы изменить объект, вы создаете клон, который затем изменен. В таком случае вы не испытали бы такой «проблемы». Итак, мы могли бы написать что-то вроде этого:
В функции карты мы теперь клонируем пользовательский объект, который мы изменяем и возвращаем.
В случае, если вы придерживаетесь объекта мутации, Зоран Джамбор Добавлено еще одно удивительное решение: Console.log («Пользователи», ... Пользователи); Таким образом, массив пользователей разрушен, и в консоли отображается список объектов:
Но здесь мы также должны быть осторожны. Если значение объекта было мутировано, выход консоли будет изменяться на расширении:
Если вы хотите быть абсолютно уверены, что объект, который был зарегистрирован, имеет то же значение, что и во время Console.log, вам нужно будет сделать глубокий клон этого. Например, мы могли бы использовать следующую функцию помощника вместо того, чтобы писать на консоль напрямую:
В строке 3 мы на самом деле создаем глубокий клон объекта, который дает следующий выход:
Теперь значение объекта не изменяется на расширении.
Если вы используете отладчик, добавление точки останова к строке 6 приостановит выполнение. Вы увидите значение текущего объекта. Если вы предпочитаете консоль большую часть времени, осознайте, что объект/массив оценивается на первом расширении.
Проверьте Эта отличная статья О том, как использовать отладчик вашего браузера.
Спасибо за чтение. Пожалуйста, поделитесь этим с кем-то, кто может найти его полезным и оставить отзыв. (Это моя первая история на среднем, и я хотел бы продолжать писать и поправляться на нее).