Если вы разработчик JavaScript (JS). Возможно, вы знаете, насколько легко научиться работать с JS. Вероятно, поэтому это один из самых популярных языков программирования во всем мире [1]. Но если вы какое-то время работали над JS, вы могли понять, что это не так мелко, как кажется. Есть концепции, которые нужно знать для плавной езды. Я постараюсь осветить некоторые из них в серии сообщений в блоге.
Итак, мы бы начали с темы, по которой есть 12 серий фильмов с абсолютно хаотичной временной шкалой. Да, я говорю о Людях Икс. И мы попытаемся объяснить, как мы можем предотвратить превращение наших данных в мутанты и в благословение или проклятие;)
В JS есть 8 основных типов данных - число, бит, строка, логическое значение, null, undefined, символ и объект. Если вам здесь не хватает массива, значит, вы должны знать, что массив - это объект. То же самое с функциями, датами, математическими функциями и регулярными выражениями. Из всех типов данных, упомянутых выше, объекты являются изменяемыми.
Возможно, вы запутались насчет изменчивости. Изменчивость в JS имеет место, когда производный дочерний элемент меняет своих родителей. Смешно звучит! вот код:
Запустив этот код в консоли браузера, вы поймете, как дочерний элемент мутирует элементы массива отца, и теперь у отца также есть элемент массива «милый ребенок», который мы вставили в дочерний элемент.
Вот еще один пример:
Это свойство изменчивости может привести к серьезным ошибкам в вашем коде, и в конечном итоге его может стать чрезвычайно сложно отлаживать. Так какое же решение?
Что ж, примите себя, поскольку операторы распространения появляются на сцене , чтобы спасти положение от мутантов.
Синтаксис распространения позволяет развернуть итерацию, например выражение массива или строку, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива), либо выражение объекта должно быть раскрывается в местах, где ожидается ноль или более пар ключ-значение (для объектных литералов).
- Веб-документы MDN
Если вас путают слишком много слов, давайте рассмотрим пример:
Вы заметили, как вместо чисел в a и b мы передали массив с помощью оператора распространения.
Точно так же мы могли бы использовать оператор распространения с объектами JS. Что мы обсудим позже.
Теперь вернемся к первоначальной цели - остановить мутацию в JS. Мы бы попытались решить варианты использования, определенные на рисунках 1 и 2.
Чтобы остановить мутацию в массиве при добавлении элемента, мы могли бы сделать следующее:
Чтобы остановить мутацию при удалении элемента из массива, мы могли бы сделать следующее:
В приведенном выше методе мы использовали свойство .filter, которое в основном фильтрует все элементы массива Father, что не является «красивым». Таким образом, дочерний элемент не получает значение по ссылке, а получает только значения от отца.
Теперь поговорим о Объектах. Допустим, у нас есть следующий объект.
Теперь в объект выше мы хотим добавить еще один ключ «dob» и создать новую переменную.
или изменение значения существующего ключа
В приведенных выше методах мы использовали операторы распространения в объекте, что технически похоже на расширение всех значений пары ключей.
Надеюсь, это краткое введение в неизменяемость было информативным. Неизменяемость - важная концепция, когда вы работаете с библиотеками JS, такими как React JS. Так что бейте и спасите свой JS-код от мутации!
Использованная литература:
Stackoverflow Insights
https://learnworthy.net/stackoverflow-listed-the-most-commonly-used-programming-languages/
MDN Mozilla
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Автор
Сандип Гантаит
http://www.sandeepg.co.in
