11 корисних прийомів у JavaScript

У цій статті ми розповімо про 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”