Малоизвестные функции JavaScript, которые позволят улучшить качество вашего кода
Вступление
JavaScript - это мощный и универсальный язык программирования, обладающий множеством встроенных функций, которые могут помочь вам писать более эффективный, ремонтопригодный и читаемый код.
В этой статье я объясню, как использовать некоторые встроенные функции, которые, несомненно, окажутся для вас полезными. Я расскажу о Debounce, Throttle, Once, Memoize, Curry, Partial, Pipe, Compose, Pick, Omit и Zip, которые вы можете сохранить в служебном файле / классе, чтобы оптимизировать качество вашего кода как разработчика JavaScript.
Хотя функции объясняются для языка JavaScript, они могут быть легко реализованы на любом языке программирования. Как только концепция различных функций будет понята, её можно будет применять везде.
Кроме того, о функциях (или концепциях), описанных в этой статье, часто задают вопросы на технических собеседованиях.
Независимо от того, являетесь ли вы новичком или опытным senior-разработчиком, эти функции оптимизируют ваш код. Они сделают работу с JavaScript более приятной и эффективной.
Debounce
Функция Debounce - это метод предотвращения повторной активации функции в результате быстрой серии событий. Она работает путём откладывания выполнения функции до тех пор, пока не пройдет определённый период времени. Функция Debounce - это полезное решение, которое может быть применено в реальных приложениях для повышения производительности за счёт предотвращения выполнения функций, если пользователь быстро нажимает на кнопки.
Следующий фрагмент покажет, как реализовать функцию debounce на JavaScript:
В этом фрагменте JavaScript Debounce вернёт новую функцию, которая выполняет исходную функцию после ранее определённой задержки. Если функция будет вызвана снова, тайм-аут будет сброшен, и вызов функции будет отложен.
Она будет полезна, если у вас есть функция, которая обновляет макет веб-страницы при изменении размера окна. Без функции Debounce эта функция вызывалась бы много раз подряд по мере изменения пользователем размера окна, что может вызвать проблемы с производительностью. С помощью функции Debounce скорость обновления макета может быть ограничена, что делает страницу более отзывчивой и эффективной.
Этот фрагмент показывает, как функция Debounce будет использоваться в данном случае использования:
В этом примере функция UpdateLayout будет вызываться не чаще одного раза каждые 250 миллисекунд при изменении размера окна. Эта функциональность гарантирует, что макет обновляется только через 250 мс после того, как пользователь закончил изменять размер окна, что делает веб-страницу более эффективной и отзывчивой.
Throttle
Функция Throttle аналогична функции Debounce, но она имеет немного иное поведение. Вместо ограничения скорости, с которой вызывается функция, функция Throttle ограничивает скорость, с которой выполняется функция. Это означает, что она запретит выполнение, если функция была вызвана ранее в течение заданного периода. Это гарантирует, что определённая функция выполняется с постоянной скоростью и не будет запускаться слишком часто.
Реализация функции Throttle:
В этом фрагменте функция Throttle выполнит предоставленную функцию func, обновит переменную wait до значения True, а затем запустит таймер, который сбросит параметр wait после прохождения delay. Если функция Throttle будет вызвана снова, она либо вызовет предоставленную функцию, либо просто вернёт значение, если параметр wait по-прежнему будет иметь значение true.
Она может быть использована на веб-странице, если вы хотите выполнить функцию для обновления макета во время прокрутки. Без Throttle эта функция обновления будет вызываться несколько раз по мере прокрутки страницы пользователем, что приведёт к серьезным проблемам с производительностью. Используя функцию Throttle, вы можете гарантировать, что она будет выполняться только один раз каждые X миллисекунд. Это приведёт к более отзывчивому и эффективному использованию веб-страницы.
В следующем фрагменте вы можете увидеть, как можно использовать функцию Throttle:
Определив функцию throttleUpdatedLayout и указав задержку в 250 миллисекунд, можно гарантировать, что функция UpdateLayout будет выполняться не чаще одного раза каждые 250 миллисекунд при прокрутке окна. Если событие будет запущено до окончания этого временного промежутка, ничего не произойдет.
Once
Функция Once - это метод, который предотвратит выполнение, если он уже вызван. Это особенно полезно при работе с событиями прослушиваний, где вы часто сталкиваетесь с функциями, которые должны выполняться только один раз. Вместо того, чтобы удалять события прослушиваний каждый раз, вы можете использовать функцию Once в JavaScript.
Например, у вас может быть функция, которая отправляет запрос на сервер для загрузки некоторых данных. С помощью функции once() вы могли бы гарантировать, что запрос не будет отправляться несколько раз, если пользователь продолжает нажимать на кнопку. Это позволит избежать проблем с производительностью.
Без функции once() запрос к серверу отправлялся бы столько раз, сколько вы нажмёте на кнопку.
Применение функции once() к любому коду будет выглядеть следующим образом:
В этом примере функция requestSomeData будет вызвана один раз, даже если пользователь нажмёт на кнопку несколько раз.
Memoize
Memoize - это функция JavaScript, которая используется для кэширования результатов данной функции, чтобы предотвратить многократный вызов дорогостоящих в вычислительном отношении подпрограмм с одними и теми же аргументами.
Функция memoize() кэширует результат данной функции и использует аргументы в качестве ключа для извлечения результата при повторном вызове с теми же аргументами.
Теперь, если у вас есть функция, которая выполняет сложное вычисление, основанное на входной переменной, вы можете использовать функцию memoize() для кэширования результатов и мгновенного их извлечения при многократном вызове с одним и тем же вводом.
Чтобы увидеть преимущества функции memoize(), вы можете использовать её для вычисления чисел Фибоначчи:
В этом примере функция fibonacci() будет преобразована в функцию memoizedFibonacci. Затем будет вызвана функция memoized(), и время выполнения будет занесено в консоль.
Результат будет выглядеть следующим образом:
Хотя второй вызов вычисляет только число Фибоначчи 29, это заняло намного больше времени, чем вычисление числа Фибоначчи 30 во второй раз, поскольку оно было кэшировано функцией memoize().
Curry
Функция Curry (также известная как Currying) - это продвинутая функция JavaScript, используемая для создания новой функции из существующей путем “предварительного заполнения” некоторых её аргументов. Currying часто используется при работе с функциями, которые принимают несколько аргументов, и преобразуют их в функции, которые принимают одни аргументы, потому что другие всегда остаются неизменными.
Использование функции Curry имеет несколько преимуществ:
- Она помогает избежать повторного использования одной и той же переменной
- Она делает код более читабельным
- Она делит функции на множество более мелких функций
Эта функция принимает другую функцию (func) и необязательный параметр arity, который по умолчанию равен длине аргументов func. Она возвращает новую функцию (curried), которая может быть вызвана с заданным числом аргументов. Если были предоставлены не все аргументы, она возвращает новую функцию, которая может быть вызвана с большим количеством аргументов до тех пор, пока не будут предоставлены все требуемые аргументы. Когда будут предоставлены все аргументы, вызывается исходная функция (func), и будет возвращён её результат.
Чтобы понять преимущества функции Curry, вы могли бы придумать метод вычисления расстояния между двумя точками на плоскости. Используя функцию Curry, вы можете создать новую функцию, для которой потребуется только одна из этих точек, что упростит её использование.
Следующий фрагмент покажет, как ранее определенная функция Curry используется для оптимизации удобочитаемости:
В этом примере создается обработанная версия функции distance (distanceFromOrigin) с использованием функции Curry и передачей distance в качестве первого аргумента и 3 в качестве второго аргумента (arity). Кроме того, она вызовет функцию curried с 0,0 в качестве первых двух аргументов.
Результирующая функция distanceFromOrigin теперь является новой функцией, которой требуется всего два аргумента, и она всегда будет использовать 0,0 в качестве первой точки.
Partial
Функция Partial в JavaScript аналогична функции Curry. Существенное различие между Curry и Partial заключается в том, что вызов функции Partial возвращает результат мгновенно вместо возврата другой функции по currying -цепочке.
Функция Partial в JavaScript обычно принимает существующую функцию, один или несколько входных аргументов и возвращает новую функцию, которая вызывает исходную функцию с дополнительными аргументами, передаваемыми при её вызове.
В следующем примере использования функция calculate будет предварительно заполнена первыми двумя аргументами, чтобы сгенерировать новую функцию с более читаемым именем:
В этом примере функция multiply10By создаётся путем частичного применения общей функции calculate и предварительного заполнения первых двух аргументов 8 и 2. Это создаст новую функцию multiply10By, для которой требуется только один аргумент, указывающий количество умножения на 10, которое должно быть выполнено. Кроме того, это сделает код более читаемым и понятным.
Pipe
Функция Pipe - это служебная функция, используемая для объединения в цепочку нескольких функций и передачи выходных данных одной из них. Она похожа на оператор Unix pipe и будет применять все функции слева направо с помощью функции JavaScript reduce():
Чтобы понять функцию Pipe, представьте, что у вас есть три функции:
- добавить Prefix к String
- добавить Suffix к String
- преобразовать строку в верхний регистр
Затем вы можете использовать функцию pipe для создания новой функции, которая будет применять всё это слева направо к строке.
В этом примере функции decorated1 и decorated2 создаются путём передачи функций addPrefix, addSuffix и toUpperCase в разном порядке. Созданные новые функции могут быть вызваны с помощью входной строки, чтобы применить три исходные функции в заданном порядке. Результирующие выходные строки будут отличаться, поскольку порядок, указанный в функции pipe, отличается.
Compose
Функция Compose такая же, как и функция Pipe, но она будет использовать reduceRight для применения всех функций:
Это приведёт к той же функциональности, но функции будут применяться справа налево.
Pick
Функция Pick в JavaScript используется для выбора определённых значений из объекта. Это способ создать новый объект, выбрав определённые свойства из предоставленного проекта. Это метод функционального программирования, который позволяет извлекать подмножество свойств из любого объекта, если эти свойства доступны.
Вот реализация функции Pick:
Эта функция принимает два параметра:
- obj: Исходный объект, из которого будет создан новый объект
- keys: Массив ключей для выбора в новом объекте.
Чтобы создать новый объект, функция будет использовать метод reduce() для перебора ключей и сравнения их со свойствами исходного объекта. Если значение присутствует, оно будет добавлено к объекту accumulator функции reduce, которая была инициализирована с помощью {}.
В конце функции reduce объект accumulator станет новым объектом и будет содержать только указанные свойства, которые были в массиве keys.
Эта функция полезна, если вы хотите избежать чрезмерной выборки данных. С помощью функции Pick вы можете извлечь любой объект из базы данных, а затем выбрать только необходимые свойства и вернуть их вызывающей стороне.
Эта функция будет использовать функцию pick() для создания нового объекта, содержащего только name и website , который может быть возвращён вызывающему без предоставления role, password или id.
Omit
Функция Omit является противоположностью функции Pick, поскольку она удалит определённые свойства из существующего объекта. Это означает, что вы можете избежать чрезмерной выборки, скрыв свойства. Её можно использовать в качестве замены функции Pick, если количество свойств, которые нужно скрыть, меньше, чем количество свойств, которые нужно выбрать.
Эта функция принимает 2 аргумента:
- obj: Исходный объект, из которого будет создан новый объект
- keys: массив ключей, которых не будет в новом объекте.
Чтобы создать новый объект и удалить свойства, функция Object.keys() используется для создания массива ключей для исходного объекта. Затем функция JavaScript filter() удалит каждый ключ, который был указан в аргументе keys. С помощью функции reduce будут повторены остальные ключи, и будет возвращён новый объект, который состоит только из каждого ключа, не предоставленного в массиве keys.
На практике вы можете использовать её, если у вас есть большой пользовательский объект, где вы хотите удалить только идентификатор:
В этом примере функция omit() используется для удаления свойства id и извлечения объекта, который сделает ваш код более читаемым, чем при использовании цикла for, установив obj.id = undefined или с использованием pick() и предоставлением каждого атрибута для выбора.
Zip
Функция Zip - это функция JavaScript, которая сопоставляет каждый переданный массив элементов с другим элементом массива и используется для объединения нескольких массивов в единый массив кортежей. Результирующий массив будет содержать соответствующие элементы из каждого массива. Часто эта функция используется при работе с данными из нескольких источников, которые необходимо каким-либо образом объединить или соотнести.
Реализация этой функции проста:
Этот фрагмент JavaScript создаст новый массив массивов, где каждый подмассив состоит из элементов предоставленных массивов. Это означает, что каждый элемент исходного массива будет сопоставлен другому элементу из другого исходного массива с тем же индексом.
Например, у вас могло бы быть три массива, которые:
- содержат координату x
- содержат координату y
- содержат координату z
Без функции zip вы бы вручную перебирали массивы и соединяли элементы x, y и z в пары. Но, используя функцию zip, вы можете передать исходные массивы и сгенерировать новый массив кортежей (x, y, z).
В этом примере функция zip используется для объединения массивов xCoordinates, yCoordinates и zCoordinates в единый массив кортежей.
Заключение
В этой статье я рассказал о многих полезных функциях, которые помогают писать более эффективный, читаемый и поддерживаемый JavaScript-код. При правильном применении эти функции повысят качество вашего кода и облегчат работу с проектами.
Наконец, обучение эффективному использованию этих функций в реальных программных проектах - это непрерывный процесс, требующий практики. Но через некоторое время вы будете использовать эти функции с лёгкостью и эффективностью, делая ваш код более читаемым и ремонтопригодным. Кроме того, будет оптимизировано общее качество кода.
Статья была взята из этого источника: