11 полезных приёмов в JavaScript

В этой статье мы расскажем об 11 весьма полезных приёмах языка JavaScript. Они помогут вам сократить объём кода и оптимизировать его. Итак, начнём. 

Конвертация в Boolean при помощи оператора !!

Порой нам нужно проверить, существует ли значение переменной и валидно ли оно, чтобы в этих случаях считать их верными, то есть равными true. Для этого можно применить к переменной оператор двойного отрицания !!, который автоматически меняет любой тип данных на логический (boolean) и возвращает false только в тех случаях, когда переменная принимает одно из следующих значений: 0, null, "", undefined или NaN. Вот простой пример:

Если значение account.cash больше нуля, account.hasMoney будет равна true.

Конвертация в Number при помощи оператора +

Удивительно простой приём! Работает он только со строками, а во всех остальных случаях возвращает NaN (Not a Number). Взглянем на пример:

Эта магия также работает с типом Date, возвращая timestamp:

Раз уж речь зашла о магии, советуем прочитать нашу статью, которая расскажет о настоящей магии JavaScript.

Упрощённая запись условных выражений

Допустим, у нас есть подобный код:

Его можно сократить, поместим оператор && между переменной (значение которой проверяется) и функцией. Вот так можно записать наш код:

Аналогично можно проверить, есть ли у объекта те или иные атрибуты и методы:

Это связано с так называемой короткой логикой: если левый операнд && равен false, то правый операнд даже не будет вычислен, потому что и так ясно, что все выражение ложно. И если правым операндом является функция, то она не будет вызвана.

Значения по умолчанию при помощи оператора ||

В ES6 есть возможность задать значение аргумента по умолчанию. Для того, чтобы воспроизвести эту фичу в старых браузерах, можно использовать оператор ||, добавив в качестве второго параметра значение по умолчанию. Если первый параметр вернёт false, будет использоваться второй. Вот пример:

Подробнее о стандарте ES6 можно почитать в наших статьях:

Распознавание свойств объекта

Приём очень полезен, когда нужно проверить, существует ли тот или иной атрибут или метод. Также он может пригодиться и при кроссбраузерной вёрстке. Представим, что вам нужно написать код, совместимый с древним Internet Explorer 6, и вы хотите использовать document.querySelector() для получения элементов по идентификаторам. Но в IE6 такой функции не существует, поэтому нужно добавить проверку:

В этом примере мы можем использовать document.getElementById() как запасной вариант, если в объекте-документе нет функции querySelector.

Получение последнего элемента массива

Наверняка вы знакомы с методом Array.prototype.slice(begin, end): с его помощью можно вырезать из массива кусок, задавая его границы begin и end. Если вы не зададите значение end, то функция автоматически задаст максимально возможное значение. Но немногие знают, что этот метод может принимать и отрицательные значения — если begin равен отрицательному числу, вы получите последние элементы массива:

Укорачивание массива

Этот способ позволяет зафиксировать размер массива и удалить все лишние элементы. Например, у вас есть массив из 10 элементов, а вам нужны только первые 5. В таком случае достаточно одной простой команды: array.length = 5. Вот наглядный пример:

Замена всех подстрок

Метод String.replace() позволяет заменять подстроки при помощи регулярных выражений, но по умолчанию заменяется лишь первое вхождение подстроки. Тем не менее, вы можете исправить это, добавив /g в конец «регулярки»:

Слияние массивов

Если вам нужно объединить два массива, вы можете использовать метод Array.concat():

Однако он не подходит для слияния больших массивов, поскольку потребляет большое количество памяти, создавая новый массив. В этом случае лучше использовать Array.push.apply(arr1, arr2), что поместит второй массив в первый, сократив потребление памяти:

Конвертация NodeList в массив

Если вы вызовете document.querySelectorAll("p"), то наверняка получите массив элементов DOM, объект класса NodeList. Проблема в том, что у него нет таких полезных методов, как sort(), reduce(), map() и filter(). Чтобы активировать эти и другие полезные методы, вам нужно конвертировать NodeList в массив. Для этого нужно просто выполнить [].slice.call(elements):

Перемешивание элементов массива

Чтобы перемешать элементы массива, не используя сторонние библиотеки вроде Lodash, можно выполнить этот приём:

Заключение

Вы узнали несколько полезных приёмов, которые позволяют уменьшить JS-код. Многие из них используются в таких библиотеках, как, например, Lodash, Underscore.js и Strings.js. Если вы знаете другие приёмы, делитесь ими, и мы пополним нашу статью.

Перевод статьи «12 Extremely Useful Hacks for JavaScript»