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

Неизменяемый код можно объяснить чем-то, что никогда не меняется, переменная не может быть изменена после ее создания.

Используя JavaScript, мы увидим некоторые типы данных и изменяемые примеры, разберемся с ними и проведем неизменный рефакторинг.

Типы JavaScript

Использовать концепцию неизменяемости в JavaScript очень просто, но прежде чем мы начнем ее кодировать, нам нужно узнать о типах данных в JavaScript.

Типы в JavaScript получают разные способы хранения значений переменных. Переменные делятся на два типа: значения (примитивы) и ссылки (не примитивы).

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

Неизменяемость примитивных типов можно проиллюстрировать на следующем примере:

Итак, примитивы копируются по своим значениям.

Непримитивные типы работают немного иначе: переменная назначается ссылке в вашем объявлении, а эта ссылка присваивается значению. Непримитивные категории имеют такие типы, как объект, функция и массив.

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

В этом примере мы увидим, как это происходит:

Итак, непримитивы копируются по их ссылке.

Примеры неизменяемых массивов

Когда мы работаем с функциями массивов, некоторые из них изменяют исходный массив, это:

  • толкать
  • не сдвигать
  • поп
  • сдвиг
  • Сортировать
  • задний ход

Использование этих функций массива может вызвать побочные эффекты в вашем коде, однако мы можем реализовать все эти функции по-другому, не вызывая побочных эффектов, используя неизменяемый способ.

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

Мы собираемся использовать функцию ES6, называемую «оператором распространения», для простого управления и создания неизменяемых массивов. В следующих примерах мы увидим изменяемые и неизменяемые манипуляции с массивами.

Толкать

Этот метод добавляет элемент в конец массива, изменяя исходный массив.

Изменяемый:

Неизменяемый:

Не сдвигать

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

Изменяемый:

Неизменяемый:

Поп

Этот метод удаляет последний элемент массива, изменяя исходный массив.

Изменяемый:

Неизменяемый:

Сдвиг

Этот метод удаляет первый элемент массива, изменяя исходный массив.

Изменяемый:

Неизменяемый:

Сортировать / Вернуть

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

Изменяемый:

Неизменяемый:

Примеры неизменяемых объектов

Когда мы работаем с объектами JavaScript, мы должны убедиться, что они не мутируются, потому что их побочные эффекты могут быть источником ошибок в нашем приложении. Создав новый атрибут или изменив наше значение по ссылке, мы могли бы сделать объект изменяемым.

Чтобы избежать изменяемого кода, мы собираемся использовать функцию ES6, вызываемую «оператором распространения». Эта функция позволяет нам легко создавать неизменяемые объекты. В следующих примерах мы увидим изменяемые и неизменяемые манипуляции с объектами.

Изменяемый:

Неизменяемый:

Но мы должны быть осторожны с вложенными объектами / массивами нового объекта, когда вы изменяете вложенные объекты копии объекта, также ссылка в мутации не будет изменена в исходном объекте. Чтобы решить эту проблему, нам также необходимо передать вложенные объекты с расширением.

Изменяемый:

Неизменяемый:

Мы можем работать с «оператором отдыха», чтобы удалить или добавить какой-либо атрибут к нашему объекту, rest - это функция ES6, эта функция позволяет нам получить оставшиеся свойства в деструктурирующем объекте и создать новый неизменяемый объект. В следующем примере мы покажем, как использовать оператор rest:

Изменяемый:

Неизменяемый:

Заключение

Изучение неизменяемости в первый раз может сбить с толку, но, понимая эту концепцию, вы сможете создавать более надежные приложения.

Итак, мы узнали, как манипулировать объектами / массивами JavaScript неизменным способом (воссоздавать объекты / массивы каждый раз), эта концепция помогает нам уменьшить количество ошибок, проблем с манипуляциями с данными и лучше отслеживать наш код.

Говоря о сложных манипуляциях (вложенные объекты / массивы или большие объекты / массивы), я хотел бы порекомендовать некоторые библиотеки, такие как ImmutableJS или Immer.

Надеюсь, вам понравился этот контент! До скорого!