Какие методы массива мутирующие?

Мутирующие методы массивов в JavaScript

Мутирующие методы изменяют исходный массив напрямую. Это важно понимать при работе с состоянием и избегать побочных эффектов. React, Vue и другие фреймворки требуют создания новых массивов вместо мутации.

Основные мутирующие методы

1. push() - добавление элементов в конец

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

// Возвращает новую длину
const newLength = arr.push(6);
console.log(newLength); // 6

Альтернатива без мутации:

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
// или
const newArr = arr.concat(4, 5);

2. pop() - удаление последнего элемента

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

Альтернатива:

const arr = [1, 2, 3];
const newArr = arr.slice(0, -1);

3. shift() - удаление первого элемента

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

Альтернатива:

const arr = [1, 2, 3];
const newArr = arr.slice(1);

4. unshift() - добавление элементов в начало

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

Альтернатива:

const arr = [2, 3];
const newArr = [0, 1, ...arr];

5. splice() - универсальный метод для вставки/удаления

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

// Удалить 2 элемента начиная с индекса 1
arr.splice(1, 2);
console.log(arr); // [1, 4, 5]

// Вставить элементы
const arr2 = [1, 2, 3];
arr2.splice(1, 0, 'a', 'b');
console.log(arr2); // [1, 'a', 'b', 2, 3]

Альтернатива:

const arr = [1, 2, 3, 4, 5];
const newArr = [...arr.slice(0, 1), ...arr.slice(3)];

6. reverse() - изменение порядка элементов

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

Альтернатива:

const arr = [1, 2, 3];
const newArr = [...arr].reverse();
// или
const newArr = arr.slice().reverse();

7. sort() - сортировка массива

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

// С компаратором
const numbers = [10, 5, 40, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 10, 25, 40]

Важно: sort() сортирует как строки по умолчанию!

const arr = [10, 5, 40];
arr.sort(); // ['10', '40', '5'] - неправильно!
arr.sort((a, b) => a - b); // [5, 10, 40] - правильно

Альтернатива:

const arr = [3, 1, 4];
const newArr = [...arr].sort((a, b) => a - b);

8. fill() - заполнение элементов

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

// С диапазоном
const arr2 = [1, 2, 3, 4, 5];
arr2.fill('x', 1, 3);
console.log(arr2); // [1, 'x', 'x', 4, 5]

Альтернатива:

const arr = [1, 2, 3, 4];
const newArr = arr.map(() => 0);

9. copyWithin() - копирование элементов внутри массива

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

Меньше всего используется, практически никогда не нужен.

Немутирующие альтернативы

Почему это важно в React

// НЕПРАВИЛЬНО - прямая мутация
const [items, setItems] = useState([]);
const addItem = (item) => {
  items.push(item); // мутация
  setItems(items); // React не заметит изменение
};

// ПРАВИЛЬНО - новый массив
const addItem = (item) => {
  setItems([...items, item]); // новый массив
};

// или
const addItem = (item) => {
  setItems(prev => [...prev, item]);
};

Утилиты для работы с массивами

// Lodash (популярная библиотека)
import { clone, remove, reverse } from 'lodash';

const clonedArr = clone(arr); // глубокая копия

// Immer (для иммутабельных обновлений)
import produce from 'immer';

const newState = produce(state, draft => {
  draft.items.push(newItem);
  draft.items[0].name = 'Updated';
});

Чеклист при работе с массивами

• Мутирующие методы изменяют исходный массив
• В React/Vue всегда создавай новый массив
• sort() и reverse() требуют особого внимания
• Используй spread оператор для простых случаев
• Для сложной логики рассмотри Immer или lodash

Понимание мутирующих методов критично для избежания трудноуловимых ошибок в реактивных приложениях.