
Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.
Розповідає Флавио Фрейтас
Розробка – це цікавий процес. Але, захопившись, ми не завжди вибираємо оптимальні рішення. Наприклад, коли реалізуємо функціонал, який вже реалізований (це називається “Винаходити велосипед”). Я хочу познайомити вас з деякими функціями, які багато хто часто намагається реалізувати самостійно, хоча є шлях простіше.
Деякий час назад я почав використовувати бібліотеки (іноді одну, іноді іншу, оскільки вони виконують, загалом, однакові завдання), в яких реалізовано багато функцій, використовуваних регулярно. Ці бібліотеки – 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”
Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?