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”

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *