Вывод содержимого объекта JavaScript: обход параметров и подобъектов

Быстрый ответ

Если требуется просто и быстро отобразить объект в JavaScript, отлично подойдёт использование JSON.stringify(). Работает так:

console.log(JSON.stringify(yourObject, null, 2));  // Два пробела на отступ — роскошное подчеркивание!

Тем не менее, стоит помнить: данный метод не обработает функции и будет неспособен справиться с циклическими ссылками. В этих случаях лучше использовать специализированную библиотеку или написать собственную функцию обработки.

Все на борт JSON.stringify!

Преобразование вывода

JSON.stringify() позволяет не только выводить данные, но и преобразовывать их в требуемый формат. Используйте второй параметр для передачи функции и управления результатом!

console.log(JSON.stringify(yourObject, (key, value) =>
  typeof value === 'number' ? value.toString() + ' 💰': value, 2
));

Подробнее об этом расскажет наш спикер на видео

Node.js и его возможности

Для обработки объектов в Node.js отлично подходит функция util.inspect(). Она способна корректно обрабатывать циклические ссылки и функции внутри объектов.

const util = require('util');
console.log(util.inspect(yourObject, { showHidden: false, depth: null })); // для полного и глубокого обзора

Уделите время на изучение документации — так вы сможете максимально использовать все возможности данной функции.

Дружелюбный интерфейс браузера

В консоли браузера просто выполните console.log(yourObject) для динамической обработки объектов и их свойств.

Визуализация

Вот как может выглядеть ваш treasureChest:

Сундук с сокровищами: { 'золотые монеты': 100, 'изумрудные украшения': 5, 'серебряные мечи': 2 }

Не бойтесь заглянуть внутрь:

console.log(JSON.stringify(treasureChest, null, 2));

Фрагмент визуального представления:

{
  "золотые монеты": 100,
  "изумрудные украшения": 5,
  "серебряные мечи": 2
}

Почувствуйте холод золотых монет!

Дневники JSON.stringify

Почему стоит избегать toSource()

Метод toSource() поддерживается только в Firefox и не соответствует широко принятым стандартам. Поэтому лучше отдать предпочтение JSON.stringify().

Путь экспериментатора

Если JSON.stringify() для вас недостаточно, используйте свои методы. Опробуйте функцию printObject(), которая обходит свойства объекта с помощью forEach или for...in:

function printObject(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      console.log(`${key}: ${obj[key]} 👀`);
    }
  }
}

Забытые знания древних библиотек JSON

Некоторые библиотеки JSON предлагают возможности по расширенной обработке, например, преобразование массивов или работу с объектами Date. Это целый мир возможностей.

Полезные материалы

1. Console – Web APIs | MDN
2. JavaScript Objects
3. Pretty-print JSON using JavaScript – Stack Overflow
4. JSON.stringify() – JavaScript | MDN
5. Util | Node.js v21.6.1 Documentation
6. Chrome DevTools | Chrome for Developers
7. Objects • JavaScript for impatient programmers (ES2022 edition)