Новости web-panda https://web-panda.ru Авторский блог @CatOstrovsky. Только все самое интересное о JavaScript, PHP, NodeJS... ru Lodash - функции будущего в JS уже сегодня https://web-panda.ru/post/lodash-first-steps

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

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

Его можно разбить на несколько основных направлений:

  • Utilities - для упрощения общих задач программирования, таких как определение типа, а также упрощение математических операций.;
  • Function - упрощение связывания, декорирование, сдерживание, дросселирование, debouncing, currying и изменение указателя;
  • String - функции преобразования для выполнения основных операций с строками, такие как обрезка, преобразование в верхний регистр, случай верблюда и т.д.;
  • Array - создание, разбиение, объединение, изменение и сжатие;
  • Collection - итерация, сортировка, фильтрация, расщепление и строительство;
  • Object - доступ, расширение, слияние, дефолты и преобразование;
  • Seq  - caching, упаковка, фильтрация и тестирование.

 

Библиотека доступна для установки с CDN без использования сборщиков, доступна на npm, есть поддержка TypeScript. Начать пользоваться Lodash очень просто, поэтому мы не будем уделять внимание установке. Если у Вас возникнут сложности - можете обратиться к документации, здесь подробно рассмотрены все варианты подключения библиотеки.

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

  • forEach - используется для перебора массива;
  • filter - используется для фильтрации массива через callback функцию;
  • map -  используется для трансформации массива;
  • every/some - методы используются для проверки массива;
  • reduce/reduceRight - используется для последовательной обработки каждого элемента массива с сохранением промежуточного результата.

Более подробную информацию по этим функциям Вы можете найти здесь.

Так же появились такие нововведения как:

Но несмотря на это польза библиотеки все равно не вызывает ни капли сомнения, JavaScript еще не скоро "впитает" или повторит все возможности Lodash.

Для того что бы понять удобство использования Lodash, давайте попробуем его в деле.

Предположим что мы делаем интернет-магазин и что бы снизить нагрузку на сервер мы решили переложить сложную логику сортировки и фильтрации на JavaScript. Логика будет следующая:

1) Пользователь открывает страницу - подгружаются все товары магазина и кладутся в переменную;

2) При взаимодействии с фильтрами и сортировками - JavaScript выполняет манипуляции с данными и выводит их пользователю;

В терминологии lodash коллекция - это набор объектов(сущностей), который заключен в массив. В данном случае наши товары являются сущностями, а массив с товарами - коллекцией. Таким образом мы можем применять все методы для коллекций из существующих в Lodash. Наши товары будут представлены в виде объектов и собраны в коллекцию вида:


var products = [
    {
        id: 0,
        name: "Товар 1",
        price: 1200,
        color: "Красный",
        размер: "XL"
    },
    ....
]

Lodash хранится в переменной _. С технической стороны: переменная _   - это объект Lodash, который содержит в себе множество методов (свойств).  Из этого следует что к переменной Lodash можно обращаться как к обычному объекту, используя "_.", таким образом для вызова функции "filter" нам потребуется написать следующее "_.filter(...)". Это важно для понимания и правильного восприятия структуры библиотек, во избежание эффекта "абракадабры" для разработчика (я написал вот так, а оно там как-то само все сделало). 

Для реализации задумки необходимо вывести два фильтра и одну сортировку:

  1. по цвету;
  2. по размеру;
  3. сортировка по цене.

Дабы сильно не заморачиваться, я сделал простые