48. Мутирующие vs Немутирующие методы массивов

JavaScript: Мозги. Урок: Мутирующие vs Немутирующие методы массивов

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

Что такое мутирующие и немутирующие методы?

Мутирующие методы - это методы массивов, которые изменяют исходный массив. Другими словами, после применения такого метода, исходный массив будет изменен.

Немутирующие методы - это методы массивов, которые не изменяют исходный массив. Они возвращают новый массив, который является результатом операции, а исходный массив остается нетронутым.

Примеры мутирующих методов

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

• push() - добавляет элемент(ы) в конец массива.
• pop() - удаляет последний элемент из массива.
• shift() - удаляет первый элемент из массива.
• unshift() - добавляет элемент(ы) в начало массива.
• splice() - добавляет/удаляет элементы из массива в определенной позиции.
• sort() - сортирует элементы массива.
• reverse() - переворачивает порядок элементов в массиве.

// Пример мутирующих методов
let numbers = [1, 2, 3];

numbers.push(4); // Добавляем 4 в конец
console.log(numbers); // Вывод: [1, 2, 3, 4]

numbers.pop(); // Удаляем последний элемент
console.log(numbers); // Вывод: [1, 2, 3]

numbers.sort(); // Сортируем массив
console.log(numbers); // Вывод: [1, 2, 3]

Примеры немутирующих методов

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

• slice() - возвращает новый массив, содержащий часть исходного массива.
• concat() - возвращает новый массив, состоящий из соединения двух или более массивов.
• map() - возвращает новый массив, содержащий результаты вызова указанной функции для каждого элемента исходного массива.
• filter() - возвращает новый массив, содержащий только те элементы исходного массива, для которых функция возвращает true.
• reduce() - применяет функцию к аккумулятору и каждому элементу массива (слева направо), сводя его к одному значению.

// Пример немутирующих методов
let numbers = [1, 2, 3];

let newNumbers = numbers.slice(1); // Создаем новый массив, начиная с индекса 1
console.log(numbers); // Вывод: [1, 2, 3] (исходный массив не изменился)
console.log(newNumbers); // Вывод: [2, 3] (новый массив)

let combinedNumbers = numbers.concat([4, 5]); // Создаем новый массив, объединив два массива
console.log(numbers); // Вывод: [1, 2, 3] (исходный массив не изменился)
console.log(combinedNumbers); // Вывод: [1, 2, 3, 4, 5] (новый массив)

Жизненный пример

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

// Пример в React (упрощенный)
import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState(['apple', 'banana', 'cherry']);

  const addItem = (newItem) => {
    // Используем немутирующий метод concat для создания нового массива
    setItems(items.concat(newItem));
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem('date')}>Add Date</button>
    </div>
  );
}

export default MyComponent;

В этом примере, concat создает новый массив, содержащий текущие элементы items и новый элемент ‘date’. setItems обновляет состояние компонента с новым массивом, что приводит к перерисовке компонента и отображению добавленного элемента. Если бы мы использовали items.push('date'), React мог бы не обнаружить изменение, и компонент не был бы перерисован.

Ключевые моменты

• Мутирующие методы изменяют исходный массив.
• Немутирующие методы возвращают новый массив, не изменяя исходный.
• В реактивном программировании (например, в React) предпочтительно использовать немутирующие методы для обновления данных.
• Понимание этой разницы помогает писать более предсказуемый и безопасный код.
• Использование немутирующих методов повышает производительность и упрощает отладку в сложных приложениях.

Интерактивный пример