
Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.
У цій статті ми розповімо про 11 дуже корисних прийомів у мові JavaScript. Вони допоможуть Вам скоротити об’єм коду і оптимізувати його. Отже, почнемо.
Конвертація в Boolean за допомогою оператора !!
Іноді нам треба перевірити, чи є значення змінної і чи валідне воно, щоб у цих випадках вважати його правильним, тобто true
. Для цього можна застосувати до змінної оператор подвійного заперечення !!
, який автоматично міняє будь-який тип даних на логічний (boolean) і повертає false
тільки у тих випадках, коли змінна набуває одного з наступних значень: 0
, null
, ""
, undefined
чи NaN
. Ось простий приклад:
function Account (cash) { this.cash = cash;
this.hasMoney = !!cash;}var account = new Account (100.50);console.log (account.cash); // 100.50console.log (account.hasMoney); // truevar emptyAccount = new Account (0);console.log (emptyAccount.cash); // 0console.log (emptyAccount.hasMoney); // false
Якщо значення account.cash
більше нуля, account.hasMoney
буде дорівнювати true
.
Конвертація в Number за допомогою оператора +
Навдивовижу простий прийом! Працює він тільки з рядками, а в усіх інших випадках повертає NaN
(Not a Number). Розглянемо на прикладі:
function toNumber (strNumber) { return +strNumber;}console.log (toNumber ("1234")); // 1234console.log (toNumber ("ACB")); // NaN
Ця магія також працює із типом Date, повертаючи timestamp:
console.log (+new Date()) // 1461288164385
Якщо вже мова зайшла про магію, радимо прочитати нашу статтю, яка розповість про справжню магію JavaScript.
Спрощений запис умовних виразів
Припустимо, у нас є код:
if (connected) { login ();}
Його можна скоротити, помістимо оператор &&
між змінною (значення якої перевіряється) і функцією. Ось так можна записати наш код:
connected && login ();
Аналогічно можна перевірити, чи є в об’єкта ті або інші атрибути і методи:
user && user.login ();
Це пов’язано з так званою “короткою логікою”: якщо лівий операнд &&
дорівнює false
, то правий операнд навіть не буде обчислений, тому що і так ясно, що весь вираз помилковий. І якщо правим операндом є функція, то вона не буде викликана.
Значення за умовчанням за допомогою оператора ||
У ES6 є можливість задати значення аргументу за умовчанням. Для того щоб відтворити цю фічу в старих браузерах, можна використати оператор ||
, додавши як другий параметр значення за умовчанням. Якщо перший параметр поверне false
, використовуватиметься другий. Ось приклад:
function User (name, age) { this.name = name || "Oliver Queen"; this.age = age || 27;}var user1 = new User ();console.log (user1.name); // Oliver Queenconsole.log (user1.age); // 27var user2 = new User ("Barry Allen", 25);console.log (user2.name); // Barry Allenconsole.log (user2.age); // 25
Детальніше про стандарт ES6 можна почитати в наших статтях:
- Частина перша: let / const, блоки, стрілочні функції, рядки, деструктуризація, модулі, параметри, класи.
- Частина друга: мепи, слабкі мепи, обіцянки, генератори, async / await, гетери / сетери, символи.
Розпізнавання властивостей об’єкта
Прийом дуже корисний, коли треба перевірити, чи є той або інший атрибут або метод. Також він може стати в нагоді й за кросбраузерної верстки. Припустимо, що Вам треба написати код, сумісний з давнім Internet Explorer 6, і Ви хочете використати document.querySelector ()
для отримання елементів за ідентифікаторами, але в IE6 такої функції немає, тому треба додати перевірку:
if ('querySelector' in document) { document.querySelector ("#id");} else { document.getElementById ("id");}
В даному прикладі ми можемо використати document.getElementById ()
як запасний варіант, якщо в об’єкті-документі немає функції querySelector
.
Отримання останнього елемента масиву
Напевно Ви ознайомлені з методом Array.prototype.slice (begin, end)
: за його допомогою можна вирізувати з масиву фрагмент, задаючи його межі begin
і end
. Якщо Ви не задасте значення end
, то функція автоматично задасть максимально можливе значення. Цей метод може набувати і негативних значень: якщо begin
дорівнює негативному числу, Ви отримаєте останні елементи масиву:
var array =[1,2,3,4,5,6];console.log (array.slice (- 1)); // [6]console.log (array.slice (- 2)); // [5,6]console.log (array.slice (- 3)); // [4,5,6]
Укорочення масиву
Цей спосіб дозволяє зафіксувати розмір масиву і видалити всі зайві елементи. Наприклад, у Вас є масив з 10 елементів, а Вам потрібні тільки перші 5. У такому разі достатньо однієї простої команди: array.length = 5
. Ось наочний приклад:
var array =[1,2,3,4,5,6];console.log (array.length); // 6array.length = 3;console.log (array.length); // 3console.log (array); // [1,2,3]
Заміна всіх підрядків
Метод String.replace ()
дозволяє замінювати підрядки за допомогою регулярних виразів, але за умовчанням замінюється лише перше входження підрядка. Проте Ви можете виправити це, додавши /g
у кінець “регулярки” :
var string = "john john";
console.log (string.replace(/hn/, " ana")); // "joana john" console.log (string.replace(/hn/g, " ana")); // "joana joana"
Злиття масивів
Якщо Вам треба об’єднати два масиви, то Ви можете використати метод Array.concat ()
:
var array1 =[1,2,3];var array2 =[4,5,6];console.log (array1.concat (array2)); // [1,2,3,4,5,6];
Проте він не підходить для злиття великих масивів, оскільки споживає велику кількість пам’яті, створюючи новий масив. У цьому випадку краще використати Array.push.apply (arr1, arr2)
, що помістить другий масив у перший, скоротивши споживання пам’яті:
var array1 =[1,2,3];var array2 =[4,5,6];console.log (array1.push.apply (array1, array2)); // [1,2,3,4,5,6];
Конвертація NodeList у масив
Якщо Ви викличете document.querySelectorAll ("p")
, то напевно отримаєте масив елементів DOM, об’єкт класу NodeList. Проблема полягає в тому, що у нього немає таких корисних методів, як sort ()
, reduce ()
, map ()
і filter ()
. Щоб активувати ці та інші корисні методи, Вам треба конвертувати NodeList у масив. Для цього необхідно виконати [].slice.call (elements)
:
var elements = document.querySelectorAll ("p"); // NodeListvar arrayElements =[].slice.call (elements); // Тепер NodeList - це массивvar arrayElements = Array.from (elements); // Ще один спосіб конвертації
Перемішування елементів масиву
Щоб перемішати елементи масиву, не використовуючи сторонні бібліотеки типу Lodash, можна виконати цей прийом:
var list =[1,2,3];console.log (list.sort (function (){ Math.random () - 0.5 })); // [2,1,3]
Висновок
Ви дізнались про декілька корисних прийомів, які дозволяють зменшити JS-код. Багато з них використовується в таких бібліотеках, як Lodash, Underscore.js і Strings.js. Якщо Ви знаєте інші прийоми, поділіться ними, і ми доповнимо ними нашу статтю.
Переклад статті “12 Extremely Useful Hacks for JavaScript”
Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?