Какие знаешь не мутирующие методы?

Неизменяющие (Non-Mutating) методы в JavaScript

В JavaScript неизменяющие (non-mutating) методы — это методы, которые не изменяют исходный массив или объект, а возвращают новый массив, объект или значение. Их использование является основополагающим в функциональном программировании и помогает избежать побочных эффектов, что особенно важно в современных фреймворках, таких как React, где неизменяемость данных упрощает отслеживание изменений и повышает производительность.

Основные неизменяющие методы для массивов

1. Методы, возвращающие новый массив

Эти методы создают и возвращают новый массив, оставляя исходный без изменений.

• map() — создаёт новый массив, преобразуя каждый элемент исходного массива с помощью переданной функции.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)
console.log(doubled); // [2, 4, 6] (новый массив)

• filter() — возвращает новый массив, содержащий элементы исходного массива, удовлетворяющие условию.

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

• slice() — возвращает поверхностную копию части массива от начального до конечного индекса (не включая конечный).

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

• concat() — объединяет два или более массива, возвращая новый массив.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]

• flat() и flatMap() — создают новый массив, "разглаживая" вложенные массивы (flatMap() комбинирует map() и flat()).

const nested = [1, [2, 3], [4, [5]]];
const flattened = nested.flat(2);
console.log(flattened); // [1, 2, 3, 4, 5]

2. Методы, возвращающие значение или индекс

Эти методы не изменяют массив, а возвращают вычисленное значение.

• reduce() и reduceRight() — сводят массив к единственному значению, применяя аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

• find() и findIndex() — возвращают первый элемент или его индекс, удовлетворяющий условию.

const users = [{id: 1}, {id: 2}];
const user = users.find(u => u.id === 2);
console.log(user); // {id: 2}

• includes(), indexOf(), lastIndexOf() — проверяют наличие элемента или возвращают его индекс.

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

• some() и every() — проверяют, удовлетворяют ли элементы массива условию.

const numbers = [1, 2, 3];
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

Неизменяющие методы для строк

Строки в JavaScript являются примитивными и неизменяемыми значениями, поэтому все их методы возвращают новую строку.

• slice(), substring(), substr() — возвращают подстроку.
• concat() — объединяет строки.
• toUpperCase(), toLowerCase() — изменяют регистр.
• trim(), replace(), split() — также создают новые строки или массивы.

const str = " Hello World ";
const trimmed = str.trim();
console.log(trimmed); // "Hello World" (новая строка)

Неизменяющие методы для объектов

С ES6+ появились методы для работы с объектами без мутаций.

• Object.assign() — создаёт новый объект, копируя свойства из исходных объектов (поверхностное копирование).

const obj = { a: 1 };
const newObj = Object.assign({}, obj, { b: 2 });
console.log(newObj); // { a: 1, b: 2 }

• Spread-оператор (...) — современный и более читаемый способ создания новых объектов и массивов.

const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };
console.log(newObj); // { a: 1, b: 2, c: 3 }

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

Практическое значение неизменяющих методов

Использование неизменяющих методов критически важно в современной фронтенд-разработке:

• Предсказуемость состояния: Исключаются случайные мутации, особенно в контексте глобального состояния (Redux, MobX).
• Оптимизация производительности: В React и Vue сравнение ссылок на объекты и массивы становится более эффективным.
• Функциональное программирование: Чистые функции, не имеющие побочных эффектов, упрощают тестирование и отладку.
• Безопасность данных: Предотвращается нежелательное изменение данных, передаваемых между компонентами.

Пример: Сравнение мутирующего и неизменяющего подхода

// Мутирующий подход (не рекомендуется в функциональном стиле)
const mutableArray = [1, 2, 3];
mutableArray.push(4); // Изменяет исходный массив
console.log(mutableArray); // [1, 2, 3, 4]

// Неизменяющий подход (предпочтительно)
const immutableArray = [1, 2, 3];
const newArray = [...immutableArray, 4]; // Создаёт новый массив
console.log(immutableArray); // [1, 2, 3] (без изменений)
console.log(newArray); // [1, 2, 3, 4]

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