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