Объединение значений в массиве объектов: метод .join

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

Если требуется преобразовать значения свойств объектов из массива в единую строку, используйте методы .map() и .join() следующим образом:

const arrayObj = [{ key: 'Красный' }, { key: 'Зелёный' }, { key: 'Синий' }];
const result = arrayObj.map(obj => obj.key).join(', '); // "Красный, Зелёный, Синий"

Map & join… Дуо неразлучных друзей!

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

const superheroes = [{ name: 'Бэтмен' }, { name: 'Робин' }, { name: 'Аквамен' }];
const heroNames = superheroes.map(hero => hero.name).join(', '); // "Бэтмен, Робин, Аквамен"

Благодаря стрелочным функциям всё под контролем

Стрелочные функции из ECMAScript 6 – отличный инструмент для обеспечения краткости и читаемости при работе с массивами:

const animals = [{ name: 'Лев' }, { name: 'Тигр' }, { name: 'Медведь' }];
const joinedAnimalNames = animals.map(({ name }) => name).join('; '); // "Лев; Тигр; Медведь"

Вложенные свойства – ваши союзники, а не враги

Не стоит бояться работы с вложенными свойствами. С помощью деструктуризации они становятся легко доступными:

const users = [{ id: 1, profile: { name: 'Сэм', city: 'Нью-Йорк' } }, ...];
const userNames = users.map(({ profile: { name, city } }) => `${name} из ${city}`).join(', ');

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

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

Reduce – скрытная альтернатива

Метод .reduce() способен заменить .map().join(), освобождая от необходимости создания промежуточных массивов:

const arrayObj = [{ key: 'foo' }, { key: 'bar' }, ...];
const result = arrayObj.reduce(
  (accum, { key }, index) => `${accum}${index ? ', ' : ''}${key}`, 
  ''
);

Управление поведением функции join – ваше тайное оружие

Вы всегда имеете возможность управлять поведением .join(), задав метод toString для объектов в массиве:

const arrayObj = [{ key: 'foo', toString() { return `Ключ: ${this.key}`; } }, ...];
const result = arrayObj.join(', '); // "Ключ: foo, Ключ: bar, ..."

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

Представьте, что у вас есть колода игральных карт:

Колода: [ {suit: 'Пики'}, {suit: 'Червы'}, {suit: 'Бубны'} ]

Применение метода .join() к мастям этих карт приведёт к следующему результату:

let suits = deck.map(card => card.suit).join(' ♥️ ');

Теперь у вас есть строка с мастями, разделенные символом сердечка:

'Пики ♥️ Червы ♥️ Бубны'

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

1. Array.prototype.join() – JavaScript | MDN — официальная документация MDN, посвященная использованию метода .join().
2. JavaScript Array join() Method — руководство по практическому применению метода .join().
3. Методы массива — подробный обзор методов работы с массивами в JavaScript, включая .join().
4. Функции высшего порядка :: Выразительный JavaScript — глубокий анализ функций высшего порядка, используемых при обработке массивов.
5. JavaScript Map, Reduce, and Filter – JS Array Functions Explained with Code Examples — полное руководство по функциям преобразования массивов, которые можно использовать вместе с .join().
6. Javascript ES6 — Стрелочные функции и лексический this — анализ стрелочных функций из ES6, которые часто применяются в паре с методами массивов.
7. Литералы шаблонов | CSS-Tricks — разбор использования шаблонных литералов, удобных для создания строк из элементов массивов.