В этой статье мы расскажем об 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.50
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // falseЕсли значение account.cash больше нуля, account.hasMoney будет равна true.
Конвертация в Number при помощи оператора +
Удивительно простой приём! Работает он только со строками, а во всех остальных случаях возвращает NaN (Not a Number). Взглянем на пример:
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.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 Queen
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.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); // 6
array.length = 3;
console.log(array.length); // 3
console.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"); // NodeList
var 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»
