Как посмотреть весь список свойств?

Просмотр всех свойств объекта

В JavaScript существует несколько способов посмотреть все свойства объекта - от простого к продвинутому. Это важно при отладке, разработке API и понимании структуры данных.

Способ 1: console.log и console.table

Самый простой способ - вывести объект в консоль:

const user = {
  id: '123',
  name: 'John',
  email: 'john@example.com',
  age: 30,
  permissions: ['read', 'write'],
  metadata: {
    created: '2024-01-15',
    updated: '2024-02-10'
  }
};

// Просто вывести объект
console.log(user);
// Результат в консоли - развиваемое дерево

// Таблица - удобнее для массива объектов
const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 28 },
];
console.table(users);
// Красивая таблица с колонками

// Для одного объекта:
console.table(user);

Способ 2: Object.keys() - все свои свойства

const user = {
  id: '123',
  name: 'John',
  email: 'john@example.com',
  preferences: { theme: 'dark' }
};

// Только собственные свойства (не из прототипа)
const keys = Object.keys(user);
console.log(keys);
// ['id', 'name', 'email', 'preferences']

// Перебор всех свойств
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});
// id: 123
// name: John
// email: john@example.com
// preferences: [object Object]

// Подсчёт свойств
console.log(Object.keys(user).length); // 4

Способ 3: Object.entries() - пары ключ-значение

const user = {
  id: '123',
  name: 'John',
  email: 'john@example.com'
};

// Получить все пары [ключ, значение]
const entries = Object.entries(user);
console.log(entries);
// [
//   ['id', '123'],
//   ['name', 'John'],
//   ['email', 'john@example.com']
// ]

// Отобразить всё в консоли
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value} (${typeof value})`);
});
// id: 123 (string)
// name: John (string)
// email: john@example.com (string)

Способ 4: Object.getOwnPropertyNames() - включая скрытые

const obj = {
  visible: 'yes',
  another: 42
};

// Определить скрытое свойство (не enumerable)
Object.defineProperty(obj, 'hidden', {
  value: 'secret',
  enumerable: false,
  writable: true
});

// Object.keys() не найдёт скрытое
console.log(Object.keys(obj));
// ['visible', 'another']

// Object.getOwnPropertyNames() найдёт всё
console.log(Object.getOwnPropertyNames(obj));
// ['visible', 'another', 'hidden']

// Получить все свойства с описанием
Object.getOwnPropertyNames(obj).forEach(prop => {
  const descriptor = Object.getOwnPropertyDescriptor(obj, prop);
  console.log(`${prop}:`, descriptor);
});
// {
//   value: 'yes',
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Способ 5: Перебор через цикл for...in (включая прототип)

class User {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}`;
  }
}

const user = new User('John');
user.email = 'john@example.com';

// for...in перебирает собственные + наследованные enumerable свойства
for (const key in user) {
  if (user.hasOwnProperty(key)) {
    // Только собственные свойства
    console.log(`Own: ${key} = ${user[key]}`);
  } else {
    // Наследованные
    console.log(`Inherited: ${key}`);
  }
}
// Own: name = John
// Own: email = john@example.com
// Inherited: greet

Способ 6: Reflect.ownKeys() - полный список

const obj = {
  public: 'visible'
};

// Добавить символ и скрытое свойство
const sym = Symbol('hidden');
obj[sym] = 'symbol value';

Object.defineProperty(obj, 'nonEnumerable', {
  value: 'hidden',
  enumerable: false
});

// Reflect.ownKeys() возвращает всё: keys + symbols + non-enumerable
console.log(Reflect.ownKeys(obj));
// ['public', 'nonEnumerable', Symbol(hidden)]

// Отобразить всё подробно
Reflect.ownKeys(obj).forEach(key => {
  const descriptor = Object.getOwnPropertyDescriptor(obj, key);
  console.log({
    key: String(key),
    value: obj[key],
    enumerable: descriptor?.enumerable,
    writable: descriptor?.writable
  });
});

Способ 7: Инспектировать прототип

const user = {
  name: 'John',
  email: 'john@example.com'
};

// Увидеть все свойства и методы (включая наследованные)
console.log(user); // Развернуть в браузере

// Проверить прототип
console.log(Object.getPrototypeOf(user));
// { constructor: ƒ Object(), __proto__: Object... }

// Вся цепочка прототипов
function getProtoChain(obj) {
  const chain = [];
  let current = obj;
  
  while (current) {
    chain.push(Object.getOwnPropertyNames(current));
    current = Object.getPrototypeOf(current);
    
    if (current === Object.prototype) break;
  }
  
  return chain;
}

getProtoChain(user);

Способ 8: JSON.stringify - видеть структуру

const user = {
  id: '123',
  name: 'John',
  emails: ['john@example.com', 'john.doe@example.com'],
  metadata: {
    created: '2024-01-15',
    premium: true,
    credits: null,
    bio: undefined // Не будет в JSON!
  }
};

// Красиво отформатировать структуру
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
// {
//   "id": "123",
//   "name": "John",
//   "emails": [
//     "john@example.com",
//     "john.doe@example.com"
//   ],
//   "metadata": {
//     "created": "2024-01-15",
//     "premium": true,
//     "credits": null
//   }
// }

// Отфильтровать свойства при stringify
JSON.stringify(user, (key, value) => {
  if (key === 'id') return undefined; // Исключить
  return value;
});

Практический пример: инспектор объекта

function inspectObject(obj, maxDepth = 2, currentDepth = 0) {
  if (currentDepth > maxDepth) return '[...deeper]';
  
  const indent = '  '.repeat(currentDepth);
  
  console.log(`${indent}{`);
  
  Object.entries(obj).forEach(([key, value]) => {
    const type = typeof value;
    
    if (value === null) {
      console.log(`${indent}  ${key}: null`);
    } else if (type === 'object' && !Array.isArray(value)) {
      console.log(`${indent}  ${key}: {`);
      inspectObject(value, maxDepth, currentDepth + 1);
      console.log(`${indent}  }`);
    } else if (Array.isArray(value)) {
      console.log(`${indent}  ${key}: [${value.length} items]`);
    } else if (type === 'string') {
      console.log(`${indent}  ${key}: "${value}"`);
    } else {
      console.log(`${indent}  ${key}: ${value} (${type})`);
    }
  });
  
  console.log(`${indent}}`);
}

// Использование
inspectObject(user, 3);

// АЛЬТЕРНАТИВА: использовать JSON.stringify с индентацией
console.log(JSON.stringify(user, null, 2));

В DevTools браузера

1. Открыть Console tab
2. Вписать имя объекта: user
3. Нажать Enter
4. Развернуть дерево свойств - видны все!

Клик на стрелку -> развернуть вложенные объекты
Ctrl+K или cmd+K -> очистить консоль

В IDE (VSCode)

// Наведись на переменную - видишь инлайн подсказку с типом
const user: User = fetchUser();
//    ^^^^
// Наведи cursor -> видишь все свойства User типа

// Используй Intellisense
user. // Ctrl+Space -> список всех свойств

Контрольный список способов

• console.log(obj) - базовый вывод
• console.table(obj) - таблица
• Object.keys(obj) - свои свойства
• Object.entries(obj) - пары ключ-значение
• Object.getOwnPropertyNames(obj) - включая скрытые
• Reflect.ownKeys(obj) - всё включая символы
• JSON.stringify(obj, null, 2) - структура
• DevTools -> открыть объект и развернуть

Каждый способ имеет свой use case - выбирай подходящий в зависимости от задачи.