JavaScript

С выпуском ES6 и более поздними версиями JavaScript появилось множество методов, расширяющих функциональность языка. Например, появились новые методы массивов и строк, а также такие полезные операторы, как spread и rest

Однако такие служебные библиотеки, как Lodash, продолжают оставаться актуальными, так как содержат множество полезных методов, всё ещё не доступных в JavaScript из коробки.

В этой статье мы рассмотрим несколько методов из Lodash, которые по-прежнему делают разработку проще, чем чистый JavaScript: times, get, set , debounce, deburr и keyBy.

_.times

Метод times позволяет вызвать функцию несколько раз, помещает результат вызова каждой функции в массив и возвращает массив.

Метод принимает два аргумента: количество вызовов функции и саму функцию для вызова. Например:

import * as _ from "lodash";

const getRandomInteger = () => Math.round(Math.random() * 100);
let result = _.times(5, getRandomInteger);
console.log(result);

Результат:

[16, 83, 35, 87, 41]

_.debounce

Метод debounce используется для того, чтобы отложить вызов функции на определённое время. В JavaScript не существует простого способа сделать это.

Метод полезен для обработки событий, если мы хотим подождать, пока выполнится что-то, а затем вызвать функцию. Например, при поиске с ввода клавиатуры debounce будет ждать, пока пользователь закончит ввод, прежде чем вызвать API, удаляя ненужные обращения к серверу. 

Например, учтём численный ввод:

<input type="number" />

Пишем следующий JavaScript код:

import * as _ from "lodash";

const checkPositiveNumber = e => {
  console.log(+e.target.value > 0);
};

const numInput = document.querySelector("input[type=number]");
numInput.addEventListener("input", _.debounce(checkPositiveNumber, 600));

Он содержит функцию checkPositiveNumber, которая проверяет, является ли введённое значение положительным. Затем используем метод debounce, который принимает в качестве значений функцию и задержку вызова в миллисекундах. 

Функция, которую возвращает debouce, имеет те же параметры, что и исходная функция, за исключением того, что её вызов задерживается на указанное время. 

_.get

Метод get позволяет нам безопасным способом получить доступ к свойствам объекта. Даже если путь к свойствам не существует, метод вернёт undefined или значение по умолчанию вместо сбоя программы. 

Например, дан следующий объект:

const obj = {
  foo: {
    bar: { baz: { a: 3 } },
    foo: { b: 2 },
    baz: [1, 2, 3]
  }
};

Доступ к свойствам obj можно получить следующим образом: 

const result = _.get(obj, "foo.bar.baz.a", 1);

Первый аргумент  —  это объект, к значению свойства которого мы хотим получить доступ. Второй  —  это путь к свойству. Последний аргумент  —  значение по умолчанию. Получим 3 в качестве result.

В то же время, если путь не существует или undefined, мы получим undefined или значение по умолчанию. Например, если у нас есть:

const result = _.get(obj, "foo.bar.a", 1);

Мы получим 1 в result. Если мы не зададим значение по умолчанию: 

const result = _.get(obj, "foo.bar.a");

Получим undefined. Не существует способа безопасно получить значение глубоко вложенного свойства, пока оператор опциональной последовательности не станет основным.

_.set

Метод set нужен, чтобы задать значение свойству объекта. Например, дан тот же объект, что мы использовали выше:

const obj = {
  foo: {
    bar: { baz: { a: 3 } },
    foo: { b: 2 },
    baz: [1, 2, 3]
  }
};

Задать значение свойства можно, написав: 

_.set(obj, "foo.bar.a", 1);

Объект obj изменён. Как видим, метод может задавать значения для свойств, которые до этого не существовали. У исходного объекта не было foo.bar.a, он автоматически добавился после того, как было задано значение 1.

Получаем:

{
  "foo": {
    "bar": {
      "baz": {
        "a": 3
      },
      "a": 1
    },
    "foo": {
      "b": 2
    },
    "baz": [
      1,
      2,
      3
    ]
  }
}

Это работает, даже если вложенный объект не существует. Напишем: 

_.set(obj, "foo.foofoo.bar.a.b", 1);

Получим:

{
  "foo": {
    "bar": {
      "baz": {
        "a": 3
      }
    },
    "foo": {
      "b": 2
    },
    "baz": [
      1,
      2,
      3
    ],
    "foofoo": {
      "bar": {
        "a": {
          "b": 1
        }
      }
    }
  }
}

_.deburr

Чтобы удалить надстрочные знаки у символов строки, используем метод deburr. Он принимает строку и возвращает новую, где символы с надстрочными знаками заменены на символы без них. 

Например, строка “S’il vous plaît”:

const result = _.deburr("S'il vous plaît");

Превращается в "S’il vous plait". У ‘i’ больше нет надстрочного знака. 

_.keyBy

Метод keyBy принимает массив и имя свойства и возвращает объект со значением свойства в качестве ключей объекта. Например, у нас есть следующий массив: 

const people = [
  { name: "Joe", age: 20 },
  { name: "Jane", age: 18 },
  { name: "Mary", age: 20 }
];

Используем keyBy:

const results = _.keyBy(people, "name");

Тогда results будет следующим:

{
  "Joe": {
    "name": "Joe",
    "age": 20
  },
  "Jane": {
    "name": "Jane",
    "age": 18
  },
  "Mary": {
    "name": "Mary",
    "age": 20
  }
}

Затем получим объект с именем 'Joe', написав:

results['Joe']

В чистом JavaScript нет простого способа сделать это без написания нескольких строк кода. 

Заключение

В Lodash есть множество полезных функций, простых аналогов которым нет в чистом JavaScript.

Метод times для многократного вызова функции в одной строке; debounce для возврата новой функции с той же сигнатурой и кодом, что у исходной, но вызов которой отложен на заданное в миллисекундах время. 

Для безопасного доступа и установки значений свойств есть методы get и set, не вызывающие сбоя при попытке доступа к несуществующему пути свойства или возвращающие значение undefined. Также существует метод deburr для замены символов с надстрочными знаками символами без знаков. 

И, наконец, метод keyBy для преобразования массива в объект, который содержит значение заданного свойства каждой записи в качестве ключей и запись со значением имени заданного свойства в качестве значения.

Читайте также:


Перевод статьи John Au-Yeung: Why is Lodash Still Useful?