Добавление объектов в массив JavaScript и jQuery: Подробное руководство

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

Чтобы внести объект в массив на JavaScript, воспользуйтесь методом push():

let array = [{ id: 1, name: 'Алиса' }];
let objectToAdd = { id: 2, name: 'Боб' };

array.push(objectToAdd);

Чтобы поместить объект в начало массива, примените unshift():

array.unshift(objectToAdd);

Объединение массивов с объектами можно выполнить при помощи спред-оператора ...:

let anotherArray = [{ id: 3, name: 'Чарли' }];
let combinedArray = [...array, ...anotherArray];

Замена объекта на определённой позиции происходит посредством непосредственного присваивания:

array[1] = { id: 4, name: 'Дана' };

Для обеспечения иммутабельности исходных объектов примените Object.freeze():

let frozenObject = Object.freeze({ id: 5, name: 'Ева' });
array.push(frozenObject);

Распределение по отдельным рангам

С тем чтобы расположить объекты в массиве на нужные позиции, используйте splice():

array.splice(2, 0, objectToAdd);

Управление множеством объектов

Массовое добавление объектов выполняется с применением спред-оператора ...:

let objectsToAdd = [{ id: 6, name: 'Фрэнк' }, { id: 7, name: 'Грейс' }];
array.push(...objectsToAdd);

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

Представим, что добавление объектов в массив — это как приглашение гостей на праздник:

Список гостей: [👨, 👩, 👧, 👦]
Новый приятель: 👽

Мы зовем нашего нового приятеля (применяем метод .push):

guests.push(newFriend);

И вот, список гостей обновлен:

Обновлённый список гостей: [👨, 👩, 👧, 👦, 👽]

На нашем виртуальном праздничном событии радушно приветствуется новый инопланетный друг!

Динамический список гостей

Чтобы автоматизировать процесс приглашения, используйте функцию:

function addGuest(guestList, guest) {
  guestList.push(guest);
  return guestList;
}

let newComer = { id: 8, name: 'Хэнк' };
addGuest(guests, newComer);

Сохранение списка гостей в первоначальном виде

Чтобы предотвратить любые неожиданные изменения, заморозьте массив при помощи Object.freeze():

Object.freeze(array);

Помните, что заморозка не повлияет на изменяемость объектов внутри массива.

Объединение других приглашенных

Примените concat() для объединения нескольких списков приглашенных без изменения исходных:

let additionalGuests = [{ id: 9, name: 'Айви' }];
let biggerParty = guests.concat(additionalGuests);

При таком подходе исходный массив остаётся нетронутым, образуя новый список гостей!

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

1. Array.prototype.push() – JavaScript | MDN — Последняя информация о манипуляции массивами.
2. javascript – How to append something to an array? – Stack Overflow — Лучшие практики расширения массивов.
3. JavaScript Array push() Method — Погрузитесь в изучение массивов.
4. 6 Great Uses of the Spread Operator — Использование спред-оператора в современном JavaScript.
5. Array methods — Полезные примеры методов работы с массивами.
6. Data Structures: Objects and Arrays :: Eloquent JavaScript — Выбирайте подходящие инструменты для создания структур данных, включая объекты и массивы.
7. Array.prototype.concat() – JavaScript | MDN — concat поможет создать удивительные массивы.