Что регистрируется в консоли, когда вы изменяете объекты

1656514216 chto registriruetsya v konsoli kogda vy izmenyaete obekty

от Бориса Севера

1*PePMIr6hsZ70wtXX_mDCsw

Многие разработчики не используют отладчик при разработке. Вместо этого они полагаются на своего старого друга console.log().

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

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

console.log( "users: ", [{name: "John"}]);

Консоль браузера будет выглядеть так:

1*NOVGoKXu4ZAHsqA2Uvzx4g

Затем, когда вы нажимаете на треугольник, объект разворачивается. В настоящее время оценивается и отображается значение объекта.

Давайте подробнее погрузимся в это и проверим пример:

В строке 1 мы инициализируем новый users переменная, являющаяся массивом объектов.

В строке 6 мы пишем значение users сменную в консоль.

Дальше мы перебираем users, проверяем, является ли пользователь действительным, и в зависимости от возврата мы отключаем пользователя. Для аргументации предположим, что validateUser()возвращается false и выполняется код в строке 10

Невзирая на map создает новый массив, изменяя user объект также изменяет user объект в users массив. Он меняется, поскольку имеет ту же ссылку. (Для лучшего объяснения происходящего просмотрите эту статью).

Вопрос такой: что будет показано в консоли, вызываемой в строке 6?

Когда мы открываем этот пример в Chrome и Firefox, объект сворачивается. Тогда после расширения мы видим значение:

1*zri_rWMD3yqBmrzCzw0UKQ
1*StVzIGl8SQnG1SBVNMBDMQ

Включено значение falseхотя значение было true к моменту выхода. Причина этого заключается в том, что значение объекта оценивается в первый раз, когда мы нажимаем, чтобы развернуть объект (ленивое чтение).

Примечание. Chrome отобразит значок информации, говорящий: «Назначение ниже было оценено только».

Теперь давайте посмотрим на Safari:

1*FsKGB4JmFTUCNXt6-HWckA
Safari (версия 11.0.3)

Гм, включено имеет значение true. Итак, мы видим, что между браузерами есть некоторые несоответствия. Safari попытается автоматически развернуть объект. Если объект/массив большой, он свернется и будет действовать так же, как Chrome и Firefox.

Один из способов обойти это – использовать JSON.stringify(), например
console.log("users", JSON.stringify(users, null, 2));

который выведет на консоль следующий вывод:

1*vpDy5W8XC9d9egowdnlrxw

К сожалению, с помощью такого подхода вы не можете развернуть/свернуть объект. Значение не изменится.

Я большой поклонник парадигмы функционального программирования и постоянных переменных. Чтобы изменить объект, вы создаете клон, который затем меняется. В этом случае вы не столкнетесь с такой «проблемой». Итак, мы могли бы написать что-то вроде этого:

В функции map мы клонируем пользовательский объект, который мы изменяем и возвращаем.

Если вы соблюдаете мутацию объекта, Зоран Ямбор добавил еще одно разумное решение:
console.log("users", ...users);
Таким образом, массив пользователей уничтожается, а список объектов отображается на консоли:

1*gwCP36E8dG742zoIvgm9TQ

Но здесь тоже нужно быть осторожными. Если значение объекта было изменено, выход консоли изменится при расширении:

1*RRgBmR9HwBbFdrVCU5AOww

Если вы хотите быть абсолютно уверены, что объект, занесенный в журнал, имеет то же значение, которое он имел во время console.log, вам нужно будет сделать его глубокий клон. К примеру, мы могли бы использовать такую ​​вспомогательную функцию вместо непосредственной записи на консоль:

В строке 3 мы фактически создаем глубокий клон объекта, дающий следующий результат:

1*YZ4sbglklsKS_AFcWIufRQ

Теперь значение объекта не меняется при расширении.

Если вы используете отладчик, добавление точки остановки в строку 6 приостановит выполнение. Вы увидите значение текущего объекта. Если вы предпочитаете консоль большую часть времени, помните, что объект/массив оценивается при первом расширении.

Просмотрите эту замечательную статью о том, как использовать отладчик вашего браузера.

Спасибо, что читаете. Пожалуйста, поделитесь ею со всеми, кому она может быть полезна, и оставьте отзыв. (Это моя первая история на Medium, и я хотел бы продолжать писать и улучшаться).

Добавить комментарий

Ваш адрес email не будет опубликован.