Создание массива литералов объекта в цикле JavaScript

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

Для создания массива объектов с помощью цикла for, выполните следующие действия:

let objects = [];
for (let i = 0; i < 5; i++) {
  objects.push({ id: i, name: `Элемент ${i}` });
}

Если вы хотите внести изящество в решение, воспользуйтесь методом Array.from:

let objects = Array.from({ length: 5 }, (_, i) => ({ id: i, name: `Элемент ${i}` }));

Либо воспользуйтесь всей мощью современного JavaScript через метод map() и оператор расширения ...:

const labels = ['label1', 'label2', 'label3'];

const items = labels.map((label, index) => ({
  [label]: `Элемент ${index}`,
  ...additionalProperties
}));

Глубже в тему: Динамические свойства и методы массивов

Формирование объектов с помощью map()

Метод map() как нельзя лучше приспособлен для преобразования данных в массив объектов в JavaScript:

let usersData = [{name: 'Alice'}, {name: 'Bob'}];
let usersObjects = usersData.map((user, index) => ({
  id: index,
  ...user,
  isActive: true
}));

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

Использование динамически генерируемых имен свойств

ES6 делает доступными динамические ключи в объектах:

let key = 'name';
let object = {
  [key]: 'John Doe'
};

Если вы проявляете мастерство в использовании циклов, вы сможете создать объекты следующим образом:

let responses = [{ label: 'Name' }, { label: 'Age' }];

let objects = responses.map((response, index) => ({
  [response.label.toLowerCase()]: `Пример данных ${index}`,
  sortable: true,
  resizable: false
}));

Избегайте мутации!

Случайные мутации и ссылки на объекты – это обычная ошибка. Оператор расширения ... создаёт только поверхностное копирование:

let baseObject = { settings: { theme: 'dark' } };
let copiedObjects = new Array(3).fill().map(() => ({ ...baseObject }));

copiedObjects[0].settings.theme = 'light';

Для глубокого клонирования используйте JSON.parse(JSON.stringify(object)) или специальные библиотеки, например Lodash.

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

Вообразите процесс создания объектов в массиве как посадку деревьев в саду:

🌱🔄🌳
| Цикл         | Дерево (Объект) |
| ------------ | ----------------|
| 1            | { type: 'Дуб' } |
| 2            | { type: 'Сосна'}|
| 3            | { type: 'Клен'} |

Каждая итерация порождает новую «жизнь»:

let forest = [];
for(let i = 0; i < 3; i++) {
    forest.push({ type: ["Дуб", "Сосна", "Клен"][i] });
}

Таким образом, ваш «лес» объектов оживает во всей своей многообразности. 🌳🌳🌳

Традиционные и современные техники работы с циклами

Вопрос века: использовать или не использовать цикл for

Классический цикл for предоставляет полный контроль, в отличие от forEach, for...of и map(). Однако последние обеспечивают более лаконичный и наглядный код:

for (let i = 0, j = 10; i < 5; i++, j--) {
}

let doubled = [1, 2, 3].map(i => i * 2);

Овладение мастерством использования reduce()

reduce() станет вашим незаменимым помощником для накопительных операций:

let result = responses.reduce((accumulator, current, index) => {
  accumulator.push({
    [`item_${index}`]: current.label,
    additionalProperty: 'value'
  });
  return accumulator;
}, []);

Оптимизация для профессионалов

Обработка больших массивов требует оптимизации. Избегайте сложных вычислений в цикле и используйте веб-воркеры для решения более сложных задач.

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

1. Array – JavaScript | MDN — издательное руководство по использованию массивов в JavaScript.
2. Объекты JavaScript — подробное изучение объектов, их свойств и методов в JavaScript.
3. Глубокое погружение в объекты JavaScript | DigitalOcean — детальное рассмотрение работы с объектами в JavaScript.
4. Методы массивов — изучите методы массивов для эффективной работы в JavaScript.
5. Контекст выполнения JavaScript — больше информации о контексте выполнения в JavaScript и создании динамических массивов объектов.