Как преобразовать коллекцию объектов в коллекцию их полей?

Часто при работе с данными, полученными из API или базы данных, у нас есть массив объектов (например, пользователей, товаров), и нам нужно извлечь из каждого объекта только одно конкретное поле (например, идентификатор, название, email). Это необходимо для отрисовки списков, передачи данных в другой компонент или для простой агрегации.

Использование метода map()

Стандартный и наиболее распространённый способ в JavaScript — использовать встроенный метод массива map(). Он создаёт новый массив, применяя переданную функцию к каждому элементу исходного массива.

const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 35 }
];

// Извлекаем массив имён
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

// Извлекаем массив возрастов
const ages = users.map(user => user.age);
console.log(ages); // [30, 25, 35]

Альтернативные подходы

Хотя map() является идиоматичным, существуют и другие способы, например, цикл for...of или метод forEach(). Однако они менее декларативны и требуют больше кода для инициализации результирующего массива и явного добавления элементов.

// Использование for...of
const namesViaForOf = [];
for (const user of users) {
  namesViaForOf.push(user.name);
}

// Использование forEach
const namesViaForEach = [];
users.forEach(user => namesViaForEach.push(user.name));

Метод map() предпочтительнее, так как он явно выражает намерение преобразовать (отобразить) один массив в другой и возвращает новый массив, что соответствует принципам функционального программирования (отсутствие побочных эффектов).

Особые случаи и производительность

Если коллекция может содержать объекты, у которых нужное поле отсутствует или равно undefined, стоит предусмотреть обработку таких случаев, например, с помощью оператора опциональной цепочки (?.) или проверки.

const mixedData = [
  { name: 'Alice' },
  { age: 25 }, // поля name нет
  { name: 'Charlie' }
];

const extractedNames = mixedData.map(item => item?.name);
// Результат: ['Alice', undefined, 'Charlie']
// Чтобы отфильтровать undefined, можно скомбинировать с filter()
const validNames = mixedData.map(item => item?.name).filter(name => name !== undefined);

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

Вывод: Используйте метод map() для преобразования коллекции объектов в массив значений их полей — это стандартный, чистый и легко читаемый подход в JavaScript и TypeScript, идеально подходящий для подготовки данных к отображению в UI или дальнейшей обработке.