10 функций Lodash, которые можно заменить на ES6

10 функций Lodash, которые можно заменить на ES6

От автора: на данный момент Lodash – самый зависимый от npm пакет, но, если вы будете использовать ES6 функции, он вам может не понадобиться. В этой статье мы рассмотрим нативные методы сбора со стрелочными функциями и другими функциями ES6, которые помогут нам в большинстве популярных случаев использования.

1. Map, Filter, Reduce

Эти методы сбора упрощают трансформацию данных и имеют универсальную поддержку. Их можно совмещать со стрелочными функциями, что позволяет писать маленькие альтернативы реализациям Lodash:

Но это не все. В современных браузерах можно использовать find, some, every и reduceRight.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

2. Head и Tail

Синтаксис деструктуризации позволяет получать начало и оставшуюся часть списка без функций-утилит:

Точно так же можно получить последний элемент и оставшиеся:

Если вас бесит, что reverse мутирует структуру данных, можете использовать оператор расширения для клонирования массива перед вызовом reverse:

3. Rest и Spread

Функции rest и spread позволяют определять и запускать функции, принимающие меняющееся количество аргументов. ES6 представил выделенный синтаксис для обоих операторов:

4. Curry

Без языка более высокого уровня типа TypeScript или Flow мы не можем дать нашим функциям подписи типов, что усложняет каррирование. При получении каррированной функции сложно определить, сколько аргументов уже было передано и какие необходимо передать далее. С помощью стрелочных функций можно явно определять каррированные функции, что поможет другим разработчикам их понять:

Явные каррированные стрелочные функции в частности важны для отладки:

Если использовать функциональную библиотеку типа lodash/fp или ramda, можно убрать стиль auto-curry с помощью стрелок:

5. Partial

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

Остальные параметры можно поместить в оператор расширения, чтобы частично применить вариационные функции:

6. Операторы

В Lodash есть ряд функций, которые заново реализуют синтаксические операторы в виде функций. То есть их можно передать в методы сбора.

В большинстве случаев стрелочные функции делают их короткими и простыми настолько, что их можно объявить инлайн:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

7. Пути

Многие функции Lodash принимают пути в виде строк или массивов. С помощью стрелочных функций можно создавать повторно используемые пути:

Так как эти пути это лишь функции, мы можем их записать:

Можно даже сделать пути более высокого порядка с принимаемыми параметрами:

8. Pick

Утилита pick позволяет выбирать свойства из объекта. Это можно сделать и с помощью деструктуризации и сокращенных литералов объектов:

9. Constant, Identity, Noop

В Lodash есть утилиты для создания простых функций с определенным поведением:

Все эти функции можно определить инлайн с помощью стрелок:

Или можно переписать пример сверху:

10. Сцепка и поток

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

Такую же трансформацию можно задать через массив стрелочных функций:

Так нам даже не нужно думать о разнице между tap и thru. Обернув это сокращение в функцию-утилиту, мы создаем отличный инструмент общего назначения:

Заключение

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

Автор: Dan Prince

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree