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

Методы массива, которые не мутируют исходный массив

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

Методы трансформации (Non-mutating)

map() — преобразование каждого элемента:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(numbers);  // [1, 2, 3, 4, 5] — не изменился
console.log(doubled);  // [2, 4, 6, 8, 10] — новый массив

filter() — отбор элементов по условию:

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);

console.log(numbers); // [1, 2, 3, 4, 5] — не изменился
console.log(evens);   // [2, 4] — новый массив

reduce() — свёртка в одно значение:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(numbers); // [1, 2, 3, 4, 5] — не изменился
console.log(sum);     // 15 — одно значение

slice() — получение части массива:

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

console.log(arr);  // [1, 2, 3, 4, 5] — не изменился
console.log(part); // [2, 3] — новый массив

// Копирование всего массива
const copy = arr.slice();
const copy2 = [...arr]; // или так

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

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = arr1.concat(arr2);
const merged2 = [...arr1, ...arr2]; // или так

console.log(arr1);    // [1, 2] — не изменился
console.log(merged);  // [1, 2, 3, 4] — новый массив

join() — преобразование в строку:

const arr = [1, 2, 3];
const str = arr.join('-');

console.log(arr); // [1, 2, 3] — не изменился
console.log(str); // "1-2-3" — строка

flatMap() — map + flatten:

const arr = [[1, 2], [3, 4]];
const flat = arr.flatMap(x => x);
const mapped = [[1, 2], [3, 4]].flatMap(x => [x[0] * 2, x[1] * 2]);

console.log(flat);   // [1, 2, 3, 4]
console.log(mapped); // [2, 4, 6, 8]

flat() — разворачивание вложенного массива:

const nested = [1, [2, [3, 4]], 5];
const flat1 = nested.flat();      // [1, 2, [3, 4], 5]
const flat2 = nested.flat(2);     // [1, 2, 3, 4, 5]
const flatAll = nested.flat(Infinity); // [1, 2, 3, 4, 5]

includes() — проверка наличия элемента:

const arr = [1, 2, 3];
const hasTwo = arr.includes(2);

console.log(arr);     // [1, 2, 3] — не изменился
console.log(hasTwo);  // true

find() и findIndex() — поиск элемента:

const users = [{ id: 1, name: 'John' }, { id: 2, name: 'Alice' }];
const user = users.find(u => u.id === 2);
const index = users.findIndex(u => u.id === 2);

console.log(users);  // не изменился
console.log(user);   // { id: 2, name: 'Alice' }
console.log(index);  // 1

every() и some() — проверка элементов:

const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(n => n > 0);
const hasEven = numbers.some(n => n % 2 === 0);

console.log(numbers);     // не изменился
console.log(allPositive); // true
console.log(hasEven);     // true

МЕТОДЫ, КОТОРЫЕ МУТИРУЮТ (Mutating) — ИЗБЕГАЙТЕ

const arr = [1, 2, 3];

// ❌ push — добавляет в конец
arr.push(4); // arr теперь [1, 2, 3, 4]

// ❌ pop — удаляет последний
arr.pop(); // arr теперь [1, 2, 3]

// ❌ unshift — добавляет в начало
arr.unshift(0); // arr теперь [0, 1, 2, 3]

// ❌ shift — удаляет первый
arr.shift(); // arr теперь [1, 2, 3]

// ❌ splice — добавляет/удаляет элементы
arr.splice(1, 0, 'X'); // arr теперь [1, 'X', 2, 3]

// ❌ sort — сортирует на месте
arr.sort(); // arr изменяется

// ❌ reverse — переворачивает
arr.reverse(); // arr изменяется

// ❌ fill — заполняет элементы
arr.fill(0); // arr изменяется

// ❌ copyWithin — копирует элементы
arr.copyWithin(0, 1); // arr изменяется

Альтернативы для мутирующих методов

const arr = [1, 2, 3];

// Вместо push
const withNew = [...arr, 4]; // [1, 2, 3, 4]

// Вместо unshift
const withFirst = [0, ...arr]; // [0, 1, 2, 3]

// Вместо pop
const withoutLast = arr.slice(0, -1); // [1, 2]

// Вместо shift
const withoutFirst = arr.slice(1); // [2, 3]

// Вместо sort
const sorted = [...arr].sort((a, b) => a - b); // копируем, потом сортируем

// Вместо reverse
const reversed = [...arr].reverse(); // [3, 2, 1]

// Вместо splice
const removed = arr.filter((_, i) => i !== 1); // удалить индекс 1

Таблица сравнения

Best Practices

• Предпочитайте non-mutating методы — это делает код предсказуемым
• Используйте spread оператор (...) для копирования массивов
• Если нужен mutating метод, сначала создайте копию: [...arr].sort()
• В React/Vue всегда используйте non-mutating методы для state
• Функциональное программирование основано на immutability (неизменяемости)

Понимание разницы между мутирующими и не-мутирующими методами — ключ к написанию надёжного и предсказуемого JavaScript кода.