В этой статье мы расскажем об 11 весьма полезных приёмах в языке JavaScript. Они помогут вам сократить объём кода и оптимизировать его. Итак, начнём.
Конвертация в Boolean при помощи оператора !!
Порой нам нужно проверить, существует ли значение переменной и валидно ли оно, чтобы в этих случаях считать их верными, то есть равными true. Для этого можно применить к переменной оператор двойного отрицания !!, который автоматически меняет любой тип данных на логический (boolean) и возвращает false только в тех случаях, когда переменная принимает одно из следующих значений: 0, null, "", undefined или NaN. Вот простой пример:
1 2 3 4 5 6 7 8 9 10 | 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). Взглянем на пример:
1 2 3 4 5 | function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN |
Эта магия также работает с типом Date, возвращая timestamp:
1 | console.log(+new Date()) // 1461288164385 |
Раз уж речь зашла о магии, советуем прочитать нашу статью, которая расскажет о настоящей магии JavaScript.
Упрощённая запись условных выражений
Допустим, у нас есть подобный код:
1 2 3 | if (connected) { login(); } |
Его можно сократить, поместим оператор && между переменной (значение которой проверяется) и функцией. Вот так можно записать наш код:
1 | connected && login(); |
Аналогично можно проверить, есть ли у объекта те или иные атрибуты и методы:
1 | user && user.login(); |
Это связано с так называемой короткой логикой: если левый операнд && равен false, то правый операнд даже не будет вычислен, потому что и так ясно, что все выражение ложно. И если правым операндом является функция, то она не будет вызвана.
Значения по умолчанию при помощи оператора ||
В ES6 есть возможность задать значение аргумента по умолчанию. Для того, чтобы воспроизвести эту фичу в старых браузерах, можно использовать оператор ||, добавив в качестве второго параметра значение по умолчанию. Если первый параметр вернёт false, будет использоваться второй. Вот пример:
1 2 3 4 5 6 7 8 9 10 | 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 такой функции не существует, поэтому нужно добавить проверку:
1 2 3 4 5 | if ('querySelector' in document) { document.querySelector("#id"); } else { document.getElementById("id"); } |
В этом примере мы можем использовать document.getElementById() как запасной вариант, если в объекте-документе нет функции querySelector.
Получение последнего элемента массива
Наверняка вы знакомы с методом Array.prototype.slice(begin, end): с его помощью можно вырезать из массива кусок, задавая его границы begin и end. Если вы не зададите значение end, то функция автоматически задаст максимально возможное значение. Но немногие знают, что этот метод может принимать и отрицательные значения — если begin равен отрицательному числу, вы получите последние элементы массива:
1 2 3 4 | 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. Вот наглядный пример:
1 2 3 4 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 в конец «регулярки»:
1 2 3 | var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana" |
Слияние массивов
Если вам нужно объединить два массива, вы можете использовать метод Array.concat():
1 2 3 | 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), что поместит второй массив в первый, сократив потребление памяти:
1 2 3 | 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):
1 2 3 | var elements = document.querySelectorAll("p"); // NodeList var arrayElements = [].slice.call(elements); // Теперь NodeList — это массив var arrayElements = Array.from(elements); // Ещё один способ конвертации |
Перемешивание элементов массива
Чтобы перемешать элементы массива, не используя сторонние библиотеки вроде Lodash, можно выполнить этот приём:
1 2 | 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»