Как извлечь значения определённого свойства из массива объектов в новый массив?

Использование метода map() — самый простой и элегантный способ

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

Вот как это выглядит:

const users = [
  { name: 'Анна', age: 25, email: 'anna@example.com' },
  { name: 'Иван', age: 30, email: 'ivan@example.com' },
  { name: 'Мария', age: 22, email: 'maria@example.com' }
];

const names = users.map(user => user.name);
console.log(names); // ['Анна', 'Иван', 'Мария']

Разберём по шагам:

• users.map() — вызываем метод map на нашем массиве.
• user => user.name — стрелочная функция, которая принимает каждый объект user и возвращает значение его свойства name.
• Результат сохраняется в переменной names как новый массив.

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

Если вам нужно извлечь несколько свойств, можно вернуть массив или объект:

// Массив с именами и возрастами
const namesAndAges = users.map(user => [user.name, user.age]);
console.log(namesAndAges); // [['Анна', 25], ['Иван', 30], ['Мария', 22]]

// Массив объектов только с нужными полями
const simplifiedUsers = users.map(user => ({
  name: user.name,
  email: user.email
}));
console.log(simplifiedUsers); 
// [{ name: 'Анна', email: 'anna@example.com' }, ...]

Важно: Если свойство может отсутствовать у некоторых объектов, используйте опциональную цепочку (?.), чтобы избежать ошибок:

const usersWithMissing = [
  { name: 'Анна', age: 25 },
  { age: 30, email: 'ivan@example.com' }, // нет name
  { name: 'Мария', age: 22 }
];

const namesSafe = usersWithMissing.map(user => user?.name);
console.log(namesSafe); // ['Анна', undefined, 'Мария']

Если вы хотите отфильтровать объекты, у которых свойство отсутствует, можно комбинировать filter и map:

const namesFiltered = usersWithMissing
  .filter(user => user.name !== undefined)
  .map(user => user.name);
console.log(namesFiltered); // ['Анна', 'Мария']

Метод map() поддерживается всеми современными браузерами и Node.js, это стандартный инструмент для трансформации массивов. Его часто используют вместе с другими методами, такими как filter, reduce, find — это основа функционального программирования в JavaScript.

const names = [];
for (const user of users) {
  names.push(user.name);
}
console.log(names); // ['Анна', 'Иван', 'Мария']

const names = users.map(({ name }) => name);
console.log(names); // ['Анна', 'Иван', 'Мария']

const names = users.reduce((acc, user) => {
  acc.push(user.name);
  return acc;
}, []);
console.log(names); // ['Анна', 'Иван', 'Мария']