Приведи пример мутирующих методов массива

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

В JavaScript мутирующие методы (также называемые деструктивными методами) изменяют исходный массив, в то время как немутирующие возвращают новый массив, оставляя оригинал неизменным. Понимание разницы между ними критически важно для написания предсказуемого и чистого кода.

Вот ключевые мутирующие методы с примерами:

1. push() – Добавляет элементы в конец массива

Добавляет один или несколько элементов и возвращает новую длину массива.

const fruits = ['яблоко', 'банан'];
const newLength = fruits.push('апельсин', 'киви');

console.log(fruits); // ['яблоко', 'банан', 'апельсин', 'киви']
console.log(newLength); // 4

2. pop() – Удаляет последний элемент

Удаляет последний элемент и возвращает его. Массив становится короче.

const numbers = [10, 20, 30];
const lastElement = numbers.pop();

console.log(numbers); // [10, 20]
console.log(lastElement); // 30

3. shift() – Удаляет первый элемент

Удаляет первый элемент, сдвигая все последующие элементы на одну позицию влево. Возвращает удаленный элемент.

const colors = ['красный', 'зеленый', 'синий'];
const firstColor = colors.shift();

console.log(colors); // ['зеленый', 'синий']
console.log(firstColor); // 'красный'

4. unshift() – Добавляет элементы в начало

Добавляет элементы в начало массива, сдвигая существующие элементы вправо. Возвращает новую длину.

const cities = ['Москва', 'Санкт-Петербург'];
const newLength = cities.unshift('Новосибирск', 'Екатеринбург');

console.log(cities); // ['Новосибирск', 'Екатеринбург', 'Москва', 'Санкт-Петербург']
console.log(newLength); // 4

5. splice() – Модифицирует массив "на месте"

Это самый мощный мутирующий метод. Он может удалять, добавлять и заменять элементы в любом месте массива.

Базовая структура:

array.splice(startIndex, deleteCount, item1, item2, ...)

Примеры использования:

// Удаление элементов
const arr1 = [1, 2, 3, 4, 5];
const removed = arr1.splice(1, 2); // Удаляет 2 элемента, начиная с индекса 1
console.log(arr1); // [1, 4, 5]
console.log(removed); // [2, 3]

// Добавление элементов
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 0, 'x', 'y'); // Добавляет 'x', 'y' на позицию 1, не удаляя элементов
console.log(arr2); // ['a', 'x', 'y', 'b', 'c']

// Замена элементов
const arr3 = [10, 20, 30, 40];
arr3.splice(1, 2, 25, 35); // Заменяет 2 элемента на позиции 1 на 25 и 35
console.log(arr3); // [10, 25, 35, 40]

6. reverse() – Переворачивает массив

Изменяет порядок элементов на обратный.

const letters = ['a', 'b', 'c', 'd'];
letters.reverse();
console.log(letters); // ['d', 'c', 'b', 'a']

7. sort() – Сортирует массив

Сортирует элементы на месте. По умолчанию преобразует элементы в строки и сортирует по Unicode.

const nums = [3, 1, 4, 1, 5, 9];
nums.sort(); // Без функции сравнения – лексикографическая сортировка
console.log(nums); // [1, 1, 3, 4, 5, 9]

const names = ['Иван', 'Анна', 'Петр'];
names.sort();
console.log(names); // ['Анна', 'Иван', 'Петр'] (по алфавиту)

// Для числовой сортировки нужна функция сравнения
const numbersToSort = [10, 5, 100, 1];
numbersToSort.sort((a, b) => a - b); // Для сортировки по возрастанию
console.log(numbersToSort); // [1, 5, 10, 100]

8. copyWithin() – Копирует часть массива в другую позицию

Копирует последовательность элементов внутри массива без изменения его длины.

const arr = [1, 2, 3, 4, 5];
// Копирует элементы с позиции 0-2 в позицию, начиная с индекса 3
arr.copyWithin(3, 0, 3);
console.log(arr); // [1, 2, 3, 1, 2]

9. fill() – Заполняет массив указанным значением

Заполняет все или часть массива одним значением.

const emptyArray = new Array(5);
emptyArray.fill(0);
console.log(emptyArray); // [0, 0, 0, 0, 0]

const partialFill = [1, 2, 3, 4, 5];
partialFill.fill('заполнено', 1, 4); // Заполняет с индекса 1 до 4 (не включая)
console.log(partialFill); // [1, 'заполнено', 'заполнено', 'заполнено', 5]

Важные замечания о мутирующих методах

• Ссылочный характер массивов: Поскольку массивы являются ссылочными типами, мутация оригинального массива влияет на все ссылки на этот массив.
• Функциональное программирование: В функциональном программировании мутации избегают. Для этого используют немутирующие альтернативы:
  • Вместо push() – оператор spread: [...arr, newElement]
  • Вместо pop() – arr.slice(0, -1)
  • Вместо splice() – комбинация slice() и spread оператора
• Производительность: Мутирующие методы обычно более производительны, чем их немутирующие аналоги, особенно для больших массивов, так как не создают новых объектов в памяти.
• Потенциальные ошибки: Непреднамеренные мутации – частая причина багов. При передаче массива в функции, которые могут его мутировать, создавайте копии при необходимости сохранения оригинала: const copy = [...original].

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