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

Методы добавления элементов в массив JavaScript

У JavaScript есть несколько методов для добавления элементов, каждый со своими особенностями и применением. Расскажу о всех популярных подходах.

1. push() — мутирующий метод

push() добавляет элементы в конец массива и изменяет исходный массив:

// Добавление одного элемента
const arr = [1, 2, 3];
arr.push(4); // Возвращает новую длину: 4
console.log(arr); // [1, 2, 3, 4]

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

// Возвращаемое значение — новая длина
const length = arr.push(8);
console.log(length); // 8

Хорошо для:

• Изменения массива inplace
• Добавления с возвращением длины
• Императивного стиля

Плохо для:

• Функционального программирования
• Работы с immutable структурами
• React state (нужна новая ссылка)

2. unshift() — добавление в начало

unshift() добавляет элементы в начало массива:

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

// Несколько элементов
arr.unshift(-2, -1);
console.log(arr); // [-2, -1, 0, 1, 2, 3]

Важно: unshift() медленнее push(), так как нужно переиндексировать все элементы:

// Плохо (O(n) сложность)
const items = [2, 3, 4];
items.unshift(1); // Всё переиндексируется

// Лучше (O(1) сложность)
const items = [2, 3, 4];
const result = [1, ...items]; // Новый массив

3. concat() — неизменяющий метод

concat() создаёт новый массив без изменения исходного:

const arr1 = [1, 2];
const arr2 = [3, 4];

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

// Добавление одного элемента
const arr = [1, 2];
const newArr = arr.concat(3);
console.log(newArr); // [1, 2, 3]

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

// Вложенные массивы (flatten one level)
const arr = [[1, 2], [3, 4]];
const result = [].concat(...arr);
console.log(result); // [1, 2, 3, 4]

Плюсы:

• Не мутирует исходный массив
• Хорошо с React state
• Функциональный подход

4. Spread оператор (...) — современный подход

Spread — самый современный и удобный способ:

// Добавление в конец
const arr = [1, 2, 3];
const newArr = [...arr, 4];
console.log(newArr); // [1, 2, 3, 4]

// Добавление в начало
const newArr = [0, ...arr];
console.log(newArr); // [0, 1, 2, 3]

// Вставка в середину
const arr = [1, 2, 5];
const index = 2;
const newArr = [...arr.slice(0, index), 3, 4, ...arr.slice(index)];
console.log(newArr); // [1, 2, 3, 4, 5]

// Слияние нескольких массивов
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const result = [...arr1, ...arr2, ...arr3];
console.log(result); // [1, 2, 3, 4, 5, 6]

Рекомендуется для React:

function TodoList() {
  const [todos, setTodos] = useState([]);
  
  const addTodo = (todo) => {
    // Правильно — создаём новый массив
    setTodos([...todos, todo]);
    // ИЛИ с объектом
    setTodos([...todos, { id: Date.now(), title: todo }]);
  };
  
  const removeTodo = (id) => {
    // Правильно — фильтруем
    setTodos(todos.filter(t => t.id !== id));
  };
  
  const updateTodo = (id, updated) => {
    // Правильно — map с новым объектом
    setTodos(todos.map(t => 
      t.id === id ? { ...t, ...updated } : t
    ));
  };
  
  return (
    <ul>
      {todos.map(todo => <li key={todo.id}>{todo.title}</li>)}
    </ul>
  );
}

5. splice() — мутирующий с удалением

splice() изменяет массив, удаляя и добавляя элементы:

const arr = [1, 2, 3, 4, 5];

// Добавить в позицию 2, удалив 0 элементов
arr.splice(2, 0, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 3, 4, 5]

// Удалить 2 элемента и добавить 1
arr.splice(2, 2, 'x');
console.log(arr); // [1, 2, 'x', 3, 4, 5]

// Удалить элемент по индексу
const index = 2;
arr.splice(index, 1);
console.log(arr); // [1, 2, 3, 4, 5]

Параметры:

arr.splice(start, deleteCount, item1, item2, ...)
       ↓        ↓
  откуда   сколько удалить

Сравнение методов

const arr = [1, 2, 3];

// push() — мутирует, возвращает длину
arr.push(4); // [1, 2, 3, 4], возвращает 4

// concat() — не мутирует, возвращает новый массив
const arr2 = arr.concat(4); // arr не изменился

// spread — не мутирует, современно
const arr3 = [...arr, 4];

// splice() — мутирует, удаляет и вставляет
arr.splice(3, 0, 4); // вставить 4 на позицию 3

Таблица выбора метода

┌─────────────────────────┬──────────────┬────────────────┐
│ Метод                   │ Мутирует?    │ Когда использ. │
├─────────────────────────┼──────────────┼────────────────┤
│ push()                  │ Да           │ Быстро добавить│
│ unshift()               │ Да           │ Редко          │
│ concat()                │ Нет          │ Функциональный │
│ [...arr, item]          │ Нет          │ React State    │
│ splice()                │ Да           │ Вставка/удал.  │
│ flat()                  │ Нет          │ Развернуть     │
└─────────────────────────┴──────────────┴────────────────┘

Best Practices

1. В React всегда используй immutable подход:

// Плохо
const add = (item) => {
  todos.push(item); // Мутирует!
  setTodos(todos);
};

// Хорошо
const add = (item) => {
  setTodos([...todos, item]); // Новый массив
};

2. Для больших массивов рассмотри производительность:

// Плохо — O(n) для каждой вставки в начало
let arr = [];
for (let i = 0; i < 1000; i++) {
  arr = [i, ...arr]; // Spread создаёт новый массив
}

// Лучше — добавить в конец, затем развернуть
let arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
}
arr.reverse();

3. TypeScript типизация:

interface Item {
  id: number;
  title: string;
}

const addItem = (items: Item[], newItem: Item): Item[] => {
  return [...items, newItem];
};

4. Работа с вложенными структурами:

// Добавить элемент к вложенному массиву
const state = {
  groups: [
    { id: 1, items: [1, 2] },
    { id: 2, items: [3, 4] },
  ],
};

// Добавить элемент к группе с id=1
const newState = {
  ...state,
  groups: state.groups.map(g =>
    g.id === 1 ? { ...g, items: [...g.items, 5] } : g
  ),
};

Итог

Для React и современного JavaScript:

• Основной выбор: spread оператор [...arr, item]
• Альтернатива: concat()
• Избегать: push() в state обновлениях
• Для вставки в позицию: splice() если нужна мутация, иначе spread

Запомни: в React всегда создавай новый массив, а не мутируй старый!