Как добавить элемент в массив в JavaScript: 5 способов с примерами

Онлайн-тренажер Python для начинающих

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

Начать курс

Как добавить элемент в массив в JavaScript? Полный разбор с примерами

Вы пишете код на JavaScript, и вдруг встаёт вопрос: «Как добавить новый элемент в конец массива? А в начало? А может, в середину?». Если вы когда-нибудь гуглили «How to append something to an array?» — вы не одиноки. Этот вопрос на Stack Overflow собрал тысячи просмотров, и сегодня мы разберём его раз и навсегда.

Массивы — основа работы с данными в JS. Умение быстро и правильно добавлять элементы сэкономит вам часы дебага и сделает код чище. В этом туториале я покажу 5 способов добавить элемент в массив, от классического push() до современного spread-оператора. Поехали!

1. Метод push(): добавляем в конец массива

Самый популярный способ. push() добавляет один или несколько элементов в конец массива и возвращает новую длину.

const fruits = ['яблоко', 'банан'];
const newLength = fruits.push('апельсин');

console.log(fruits);    // ['яблоко', 'банан', 'апельсин']
console.log(newLength); // 3

Можно добавить сразу несколько элементов:

fruits.push('груша', 'виноград');
console.log(fruits);
// ['яблоко', 'банан', 'апельсин', 'груша', 'виноград']

Когда использовать: когда вам нужно добавить данные в конец списка — например, новый товар в корзину, сообщение в чат, запись в лог. Метод работает быстро (O(1)) и мутирует исходный массив.

2. Метод unshift(): добавляем в начало массива

Если нужно вставить элемент в начало, используйте unshift(). Он сдвигает все существующие элементы вправо.

const numbers = [2, 3, 4];
numbers.unshift(1);

console.log(numbers); // [1, 2, 3, 4]

Работает и с несколькими элементами:

numbers.unshift(-1, 0);
console.log(numbers); // [-1, 0, 1, 2, 3, 4]

Важно: unshift() медленнее push() для больших массивов, потому что нужно сдвинуть все элементы. Если массив содержит 100 000 элементов — лучше подумать о другой структуре данных (например, очереди с дека).

3. Метод splice(): вставляем в любую позицию

Универсальный солдат. splice() может удалять, заменять и, конечно, добавлять элементы в любую позицию массива.

Синтаксис: array.splice(start, deleteCount, item1, item2, ...)

start — индекс, с которого начинаем
deleteCount — сколько элементов удаляем (ставим 0, если только добавляем)
item1, item2, ... — элементы для вставки

Пример: вставляем «вишня» на вторую позицию (индекс 1):

const colors = ['красный', 'синий', 'зелёный'];
colors.splice(1, 0, 'вишня');

console.log(colors);
// ['красный', 'вишня', 'синий', 'зелёный']

Можно вставить несколько элементов сразу:

const letters = ['a', 'd'];
letters.splice(1, 0, 'b', 'c');

console.log(letters); // ['a', 'b', 'c', 'd']

Когда использовать: когда вам нужно вставить элемент строго в середину массива — например, добавить новый пункт меню между существующими. Помните: splice() мутирует массив.

4. Метод concat(): создаём новый массив

В отличие от предыдущих методов, concat() не изменяет исходный массив, а возвращает новый, объединяя два или более массивов (или элементов).

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const result = arr1.concat(arr2);

console.log(result); // [1, 2, 3, 4, 5]
console.log(arr1);   // [1, 2, 3] — не изменился

Можно добавлять не только массивы, но и отдельные значения:

const pets = ['кот', 'собака'];
const newPets = pets.concat('хомяк', ['попугай', 'рыбка']);

console.log(newPets);
// ['кот', 'собака', 'хомяк', 'попугай', 'рыбка']

Когда использовать: когда нужно сохранить исходный массив неизменным (иммутабельность) — это важно в React или Redux. Но учтите: для больших массивов concat() создаёт копию, что требует дополнительной памяти.

5. Spread-оператор (...): современный и элегантный

С появлением ES6 spread-оператор стал любимцем разработчиков. Он «разворачивает» массив и позволяет создать новый, добавив элементы в любом месте.

Добавление в конец:

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5];

console.log(newArray); // [1, 2, 3, 4, 5]

Добавление в начало:

const newArray2 = [0, ...oldArray];
console.log(newArray2); // [0, 1, 2, 3]

Добавление в середину (комбинируем spread-оператор с slice):

const arr = ['a', 'd'];
const arrWithMiddle = [...arr.slice(0, 1), 'b', 'c', ...arr.slice(1)];

console.log(arrWithMiddle); // ['a', 'b', 'c', 'd']

Когда использовать: почти всегда, когда нужна иммутабельность и читаемый код. Spread-оператор — стандарт в современном JavaScript. Минус: для вставки в середину придётся использовать slice(), что делает код чуть длиннее, чем splice().