Заощадьте свій час, уникаючи повторного написання цих популярних JavaScript-функцій

Розповідає Флавио Фрейтас

---

Розробка – це цікавий процес. Але, захопившись, ми не завжди вибираємо оптимальні рішення. Наприклад, коли реалізуємо функціонал, який вже реалізований (це називається “Винаходити велосипед”). Я хочу познайомити вас з деякими функціями, які багато хто часто намагається реалізувати самостійно, хоча є шлях простіше.

Деякий час назад я почав використовувати бібліотеки (іноді одну, іноді іншу, оскільки вони виконують, загалом, однакові завдання), в яких реалізовано багато функцій, використовуваних регулярно. Ці бібліотеки – Underscore і Lodash. Вони ефективні і легковагі (~19 КБ).

Перелік, приведений нижче, грунтований на моєму досвіді роботи в проектах. Я описав тут найбільш поширені функції, які ви напевно використовували раніше.

1. Отримати випадковий елемент зі списку

Це функція, яку я люблю найбільше. З її допомогою дуже просто заповнити базу даних випадковими значеннями, що часто буває потрібно для тестування.

const months =['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];// Поширений вариантfunction getRandomItem (list){ return list[Math.floor (Math.random () *  (list.length))];}getRandomItem (months);// Underscore і Lodash _.sample (months);

2. Об’єднання масивів

Це хороший приклад того, як ви можете скоротити ваш код і зробити його більш читаними :

const arrayA =[1, 2, 3, 4];const arrayB =[3, 4, 5, 6];// Поширений варіант
const unionArrays =  (a, b)  => Array.from (new Set ([...a, ...b]));unionArrays (arrayA, arrayB); // [1, 2, 3, 4, 5, 6]// Underscore і Lodash _.union (arrayA, arrayB);

3. Перетин масивів

Інший приклад того, як позбавитися від купи коду :

const arrayA =[1, 2, 3, 4, 5];const arrayB =[2, 3];// Поширений вариантfunction intersection (a, b) { return a.filter (Set.prototype.has, new Set (b));}intersection (arrayA, arrayB); // [2, 3]// Underscore and Lodash _.intersection (arrayA, arrayB);

4. Уникнення итерирування об’єктів через їх властивості

Отримання ключів :

const dateEnum ={SHORT: 'DD/MM/YY', LONG: 'DD/MM/YY HH:mm'};// Поширений варіант (старий, але поширений) var keys =[];for (var property in dateEnum) {
if (dateEnum.hasOwnProperty (property)) { keys.push (property); }}console.log (keys); //['SHORT', 'LONG']// У JavaScript з'явився новий спосіб, також дуже хорошийObject.keys (dateEnum);// Underscore і Lodash _.keys (dateEnum);

Набуття значень :

const dateEnum ={SHORT: 'DD/MM/YY', LONG: 'DD/MM/YY HH:mm'};// Поширений вариантvar values =[];for (var property in dateEnum) { if (dateEnum.hasOwnProperty (property)) { values.push (dateEnum[property]); }}console.log (values); // ['DD/MM/YY', 'DD/MM/YY HH:mm']// Новий варіант Javascript (ES8) надає такий способObject.values (dateEnum);// Underscore і Lodash _.values (dateEnum);

5. Розширення об’єктів

Досить часто необхідно скопіювати аргументи одного об’єкта в інший. Вирішення цього завдання досить громіздке:

const user ={name: 'John', occupation: 'Architect'};const userAddress ={street: 'Times Square Ave', city: 'New York'}// Распространенный вариантfunction copyObject (obj, obj2) { for (var key in obj2) { obj[key] = obj2[key]; } return obj;}copyObject (user, userAddress); // {name: 'John', occupation: 'Architect', street: 'Times Square Ave', city: 'New York'}// ES6Object.assign (user, userAddress);// Underscore _.extend (user, userAddress);//Loadash _.assign (user, userAddress);

6. Цикл в N ітерацій

Мы часто ітерируємо по масиву чи об’єкту N разів:

// поширений вариантfor (var i = 0; i <= 5; i++) { // ...}// Ще одинArray.from ({length: 5}, (v, k) => { // ...});// Underscore і Lodash _.times (5, (obj)  => { // ...});

7. Наявність елементу

Функція вже доступна в ES7, але приклад згодиться тим, хто ще не використовує цю версію JavaScript:

const array =['a', 'b', 'c'];// Поширений вариантfunction contains (array, element) { return array.indexOf (element) !== - 1;}contains (array, 'b'); // true// ES7array.includes ('b'); // Underscore
 .contains (array, 'b');// Lodash _.includes (array, 'b');

8. Видалення атрибутів з об’єкту

const user ={name: 'John', occupation: 'Architect', street: 'Times Square Ave', city: 'New York'};// Поширений вариантdelete user.occupation;delete user.street;user; // {name: 'John', city: 'New York'}// Underscore і Lodash _.omit (user, ['occupation', 'street']);

9. Псевдовипадкове число з діапазону

Прощайте довгі функції для отримання псевдовипадкового числа з діапазону:

// Поширений вариантfunction getRandom (min, max) { return Math.floor (Math.random () *  (max - min + 1))  + min;}getRandom (73, 1014);// Underscore і Lodash _.random (73, 1014);

10. Співвідношення (map) для вкладених атрибутів

Простий спосіб ітерироваться по масиву для повернення певного атрибуту об’єкту. Приклад на Lodash і Underscore виглядає приблизно однаково:

const books =[{ name: 'Pride and Prejudice', author: 'Jane Austen'},{ name: 'Harry Potter and the Prisoner of Azkaban', author: 'J.K. Rowling'}];// Поширений вариантbooks.map (book => book.name);// Lodash _.pluck (books, 'name');

11. Домішки (mixins)

А якщо після знайомства з функціями Lodash і Underscore ви розумієте, що вам їх бракує, то ваша відповідь – домішки. З їх допомогою ви можете створити власні функції і розширити функціонал бібліотеки.

Простий приклад:

// Underscore and Lodash _.mixin ({ capitalize: function (string){
return string.charAt (0).toUpperCase () + string.substring (1).toLowerCase (); }});_.capitalize ("john"); // John

БОНУС: Домішка, яку я часто використовую у своєму коді для отримання вкладених атрибутів об’єкту, не побоюючись, що якесь значення буде null:

// Underscore _.mixin ({ getValue (obj, path) { if (typeof obj === 'undefined' || obj === null) return; path = path.split (/[.[]"']{1,2}/); for (let i = 0, l = path.length; i < l; i += 1) { if (path[i] !== '') { obj = obj[path[i]]; if (typeof obj === 'undefined' || obj === null) return; } } return obj; }});
const user ={name: 'John', address: [{street: 'River Ave'}]};_.getValue (user, 'address[0].street'); // River Ave// Не хвилюйтеся про валидации усіх внутрішніх параметров_.getValue (user, 'occupation[9].company'); // null// Lodash вже потурбувався про етом_.get (user, 'occupation[9].company'); // null

Переклад статті “Javascript: Save time by avoiding re – writing these common functions”