Как добавить элемент в конец массива?

Как добавить элемент в конец массива?

В JavaScript существует несколько способов добавить элемент в конец массива. Каждый имеет свои особенности и случаи использования.

1. Метод push() — самый распространённый

Модифицирует исходный массив, добавляя элемент(ы) в конец:

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

// Можно добавить несколько элементов сразу
arr.push(5, 6, 7);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

// push возвращает новую длину массива
const length = arr.push(8);
console.log(length); // 8

Плюсы:

• Быстро и просто
• Привычный синтаксис
• Работает с несколькими элементами

Минусы:

• Изменяет исходный массив (мутирует)

2. Spread оператор (...) — функциональный подход

Создаёт новый массив, не изменяя исходный:

const arr = [1, 2, 3];
const newArr = [...arr, 4];
console.log(arr);    // [1, 2, 3] — не изменился
console.log(newArr); // [1, 2, 3, 4]

// Добавить несколько элементов
const result = [...arr, 4, 5, 6];
console.log(result); // [1, 2, 3, 4, 5, 6]

Плюсы:

• Не изменяет исходный массив
• Удобен в React и функциональном программировании
• Понятный синтаксис

Минусы:

• Создаёт новый массив (больше памяти)
• Медленнее на больших массивах

3. concat() — объединение массивов

Объединяет два массива и возвращает новый:

const arr = [1, 2, 3];
const newArr = arr.concat(4);
console.log(arr);    // [1, 2, 3]
console.log(newArr); // [1, 2, 3, 4]

// Можно добавить несколько элементов
const result = arr.concat([4, 5, 6]);
console.log(result); // [1, 2, 3, 4, 5, 6]

// Также работает с отдельными элементами
const another = arr.concat(4, 5, 6);
console.log(another); // [1, 2, 3, 4, 5, 6]

Плюсы:

• Не изменяет исходный массив
• Может объединять массивы
• Стабильный метод

Минусы:

• Менее очевидный синтаксис
• Медленнее на больших массивах

4. Прямое присваивание по индексу

Добавление элемента с явным указанием индекса:

const arr = [1, 2, 3];
arr[arr.length] = 4;
console.log(arr); // [1, 2, 3, 4]

// Это то же самое, что push
arr[arr.length] = 5;
console.log(arr); // [1, 2, 3, 4, 5]

Плюсы:

• Явный и понятный
• Быстро

Минусы:

• Редко используется
• Изменяет исходный массив

5. Метод slice() с конкатенацией

Создание нового массива с помощью slice():

const arr = [1, 2, 3];
const newArr = arr.slice().push(4); // ❌ Неправильно, push возвращает длину

// Правильно:
const correct = arr.slice();
correct.push(4);
console.log(correct); // [1, 2, 3, 4]
console.log(arr);     // [1, 2, 3] — исходный не изменился

Когда использовать:

• Когда нужна копия массива перед изменением

Сравнение производительности

const largeArray = Array.from({length: 100000}, (_, i) => i);

// push() — самый быстрый
console.time('push');
largeArray.push(100001);
console.timeEnd('push'); // ~0.05ms

// spread — медленнее
console.time('spread');
const spread = [...largeArray, 100001];
console.timeEnd('spread'); // ~5-10ms

// concat() — средняя скорость
console.time('concat');
const concatResult = largeArray.concat(100001);
console.timeEnd('concat'); // ~5-10ms

Рекомендации по выбору

Используй push():

• Когда не важна иммутабельность
• В циклах и для простых операций
• Когда нужна максимальная производительность

Используй spread (...):

• В React для обновления state
• В Redux и других предсказуемых архитектурах
• Когда важна иммутабельность

Используй concat():

• Когда нужно объединить несколько массивов
• Как альтернатива spread для совместимости

Пример в React

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (title) => {
    // ❌ Неправильно — мутирует state
    // todos.push({id: Date.now(), title});
    // setTodos(todos);

    // ✅ Правильно — создаёт новый массив
    setTodos([...todos, {id: Date.now(), title}]);
  };

  return (
    <div>
      {todos.map(todo => <div key={todo.id}>{todo.title}</div>)}
      <button onClick={() => addTodo('New task')}>Add</button>
    </div>
  );
}

Заключение

Для большинства случаев используй push() в обычном коде и spread оператор (...) в React/функциональном программировании. Выбор зависит от требований иммутабельности и производительности конкретного проекта.