Неизменность в JavaScript

Эта статья была первоначально размещена на среднем здесь

TLDR; Ecmascript предоставляет утилиты для поддержания непотимых данных. Эти инструменты находят свои ограничения с вложенными структурами. Иммадот это библиотека для борьбы с вложенными неподвижными структурами. Попробуйте Анкет

Согласно Википедия а Неиспользуемый объект (неизменяемый объект) является объектом, состояние которого не может быть изменено после его создания Анкет Это правило довольно просто, если вы хотите изменить какое -то свойство объекта, вы должны сделать это на копии. Позже мы увидим, какие улучшения и модные функции он разблокирует для наших разработок.

Ecmascript

Ecmascript предоставляет утилиты для обеспечения неизменности наших данных. API -интерфейсы массивы и объектов содержат методы создания копий и даже предотвращения обновления экземпляров. В последнее время Ecmascript представила новые синтаксисы для создания копий объектов и массивов.

Object.assign

Мы хотим добавить свойство имени в наш объект.

const lutraLutra = {
  commonNames: ['eurasian otter'],
}

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

const newLutraLutra = Object.assign(
  {}, 
  lutraLutra,
  { name: 'Lutra lutra' },
)

Теперь у нас есть новый объект с нашим новым имя собственность и имена общин Собственность остается неизменной. С помощью этого метода вы можете создавать/перезаписать несколько свойств одновременно.

Array.concat

Теперь давайте сделаем это с массивом. Мы хотим добавить два новых элемента в массиве неизменным образом.

const commonNames = ['eurasian otter']

В отличие от Array.push , Array.concat не мутирует наш массив. Вместо этого он возвращает новый массив.

const newCommonNames = commonNames.concat(
  'european otter',
  'common otter'
)

Этот метод гибкий. Это требует столько элементов, сколько вы хотите. Они могут быть либо значениями, либо массивами.

Object.Freeze

Object.freeze Не очень знаком. Это позволяет сделать объект неизменным! Он предотвращает каждый тип мутации (создание, модификация, делеция), вызванное использованием сетевых технологий.

let lutraLutra = {
  commonNames: ['eurasian otter', 'european otter', 'common otter'],
  name: 'Lutra lutra'
}

Мы постараемся удалить имя Свойство после объекта заморожено.

lutraLutra = Object.freeze(lutraLutra)

delete lutraLutra.name

Перераспределение не требуется, так как объект прошел, поскольку параметр был сделан неизменным по Object.Freeze . Этот метод имеет два доступных режима:

Нестандартный режим, который не применяет мутации
Строгий режим, который бросает TypeError Если вы попытаетесь применять мутации

Будьте осторожны, это не рекурсивно. Наша собственность имена общин не неизбежно.

Распространение оператора

Синтаксис оператора распространения был введен в ES2015 для массивов и в ES2018 для объектов. Он копирует все свойства данного объекта в новом объекте буквально.

const newLutraLutra = {
  ...lutraLutra,
  name: 'Lutra lutra',
}

С массивами он копирует все значения массива в новый массив.

const newCommonNames = [
  ...commonNames,
  'common otter',
]

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

Зачем использовать неизменность?

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

Цель функционального программирования состоит в том, чтобы позволить нам меньше думать и писать больше описательного кода.

— Александр Кондов

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

Каковы преимущества?

Для вас это звучит как шумиха? Необвишаемость приносит много решений для вопросов программирования, с которыми мы сталкиваемся каждый день:

Избегайте побочных эффектов
Обнаружение изменений данных сделано простым (неглубокое сравнение)
Явные изменения данных
Записка
Оптимизация памяти
Лучшие выступления
Легкое тестирование

«В отличие от большинства тенденций в мире JavaScript, неизменность данных обязательно придерживается нас на некоторое время, и на то есть веская причина: во -первых, потому что это не тенденция: это способ кодирования (и мышления в коде), который способствует ясности, Простота использования и понимание потока данных и делает код менее склонным к ошибкам. »

– Рикардо Магалхас

В последние несколько лет одной из наших самых больших задач было найти эффективный способ обнаружения изменений в наших данных, чтобы определить, должны ли мы отображать наши интерфейсы. Легко обнаружить изменения между примитивными значениями, но это совершенно другая проблема для объектов и массивов. Вы можете сравнить их по цене, но вам придется реализовать рекурсивные алгоритмы и решать потенциальные проблемы, такие как циклические ссылки. Другим методом будет сравнение ссылок на объекты со строгим оператором равенства === . Это более эффективно, и нет никакого риска входить в какую -то цикл Deathly Infinity. Вот почему современные рамки обеспечивают эту концепцию.

Выделено современным фреймворками/библиотеками

Современные фронтальные фреймворки и библиотеки основаны на концепции, которая улучшает значительные результаты. Это известный виртуальный DOM. Эта технология была создана из простых доказательств: манипуляции с DOM стоят дорого.

Как объяснено, фронтальные рамки и библиотеки решили использовать неизменность, чтобы улучшить свои выступления. В настоящее время нам приходится иметь дело с все большим количеством данных в наших приложениях и, следовательно, больше наценки. Таким образом, наши браузеры должны обрабатывать гораздо больше вычислений, чем 10 лет назад. Операции DOM являются дорогими, современные рамки, как правило, уменьшают количество обновлений DOM.

Зачем нам нужны коммунальные библиотеки?

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

const animals = {
  weasels: {
    lutraLutra: {
      commonNames: ['eurasian otter'],
    },
  },
}

const newAnimals = {
  ...animals,
  weasels: {
    ...animals.weasels,
    lutraLutra: {
      ...animals.weasels.otter,
      name: 'Lutra lutra',
    },
  },
}

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

const lutraLutra = {
  name: 'Lutra lutra',
  commonNames: ['eurasian otter', 'european', 'common otter'],
}

const newCommonNames = [...lutraLutra.commonNames]
newCommonNames[1] = 'european otter'

const newLutraLutra = { 
  ...lutraLutra,
  commonNames: newCommonNames,
}

Этим причинам достаточно, чтобы начать выяснить какой -то инструмент, который помогает сосредоточиться на том, что действительно имеет значение, значение вашего кода. Вот почему мы создали Иммадот , чтобы помочь нам сохранить чтением и поддержанным кодовой базой JavaScript. Попробуйте Анкет

Оригинал: “https://dev.to/zenika/immutability-in-javascript-2b6h”