Изучая любой язык программирования, полезно знать о его особенностях и уметь эффективно использовать языковые конструкции. Хочу поделиться с вами шорткатами для JS. Эти сокращения в некоторых случаях могут облегчить чтение кода, а также существенно уменьшить его количество. Однако следует помнить, что они могут сыграть с вами злую шутку и, если использовать их повсеместно, ваш код перестанет быть читаемым и поддерживаемым.
Использование while вместо for
Начнем с простого и достаточно часто встречающегося совета — использовать while вместо for.
var count = foo.length
while (count--) {
// whatever
}
var count = foo.length
for(var i = 0; i < count; i++) {
// whatever
}
Конечно, мне тоже нравится использовать forEach и map, однако в случаях, когда это неуместно, while выглядит более органично и читаемо. К слову, применение переменной для хранения длины массива более производительно, чем вычисление этого значения в каждой итерации.
Использование for-in с обычными массивами
Традиционно конструкцию for-in используют для итерации объектов, но не нужно забывать, что ею можно воспользоваться и для обычного массива. И хотя в документации указано, что for-in не гарантирует консистентность перебора, на практике я не встречал подобной ситуации.
var count = foo.length
for(var i = 0; i < count; i++) {
// whatever foo[i]
}
for(var i in foo) {
// whatever foo[i]
}
Приведение к булеву типу
Иногда требуется привести значение к булеву типу, и я покажу традиционное решение этой задачи, а также ее короткую форму:
var foo = Boolean(bar); var foo = !!bar;
Двойное отрицание работает так же, как и приведение, однако справедливо заметить, что, как и в случае со всеми остальными шорткатами, у новичков (да и не только) могут возникнуть сложности в восприятии такого кода.
Эквивалент Math.floor();
Есть очень простой способ округлить любое число до ближайшего целого:
var intNum = Math.floor(anyNum); var intNum = ~~anyNum;
Двойное побитовое отрицание работает как Math.floor() для положительных чисел и как Math.ceil() для отрицательных. Объяснение, как это работает, можно найти тут. Читать сложнее, но экономит десять символов.
Шорткаты для true и false
Даже для true и false можно сделать шорткат. Это выглядит уже совсем за гранью добра и зла, но раз уж мы начали эту тему, то почему бы и нет:
var foo = true,
bar = false;
var foo = !0,
bar = !1;
Но это, как ни крути, скорее антишорткат, потому как совершенно нечитаем, требует вычисления со стороны JS, да и вообще выглядит обескураживающе.
Условный оператор
Наверняка все знакомы с тернарным оператором, но не все знают, насколько удобным может быть его использование.
if (condition) {
foo = bar;
} else {
foo = baz;
}
foo = (condition ? bar : baz);
Уже неплохо, но можно пойти и дальше и использовать его в несколько строк:
if (age > 18) {
alert("OK, you can go.");
location.assign("continue.html");
} else {
location.assign("backToSchool.html");
}
age > 18 ? (
alert("OK, you can go."),
location.assign("continue.html")
) : (
location.assign("backToSchool.html");
);
Тут есть небольшой нюанс: нужно помнить, что операторы в этом случае должны быть разделены запятой, а не точкой с запятой. Другая замечательная особенность этого оператора — он возвращает значение (это было видно из первого примера), а значит, его можно использовать и с функциями.
if (condition) {
function1();
} else {
function2();
}
(condition ? function1 : function2)();
Использование AND
Не все помнят, как работает AND, — сначала он вычисляет первое значение и, только если оно равно true, вычисляет другое. Посмотрим, как это можно применить.
if (foo) {
bar();
}
if (foo) bar();
if (foo) bar();
foo && bar();
Вкупе с OR можно добиться полного эквивалента if-else, но это не стоит того, во что превратится ваш код.
Приведение строки к числу
var foo = parseFloat('3133.7'),
bar = parseInt('31337');
Короткая форма этой записи достаточно проста и элегантна:
var foo = +'3133.7',
bar = +'31337';
Для обратной задачи тоже есть свой шорткат.
Приведение числа к строке
Тут можно продемонстрировать несколько примеров, как это сделать:
var foo = 3.14,
bar = foo.toString(10); // '3.14'
var foo = 3.14,
bar = foo + ''; // '3.14'
foo += ''; // '3.14'
Я неспроста вызвал метод toString с параметром 10 — он указывает, что число нужно преобразовать в строку в десятичной системе счисления. Соответственно, для случаев, когда вам нужно получить строку в шестнадцатеричной системе счисления, эти шорткаты не помогут.
Проверка результатов indexOf
Иногда для проверки наличия или отсутствия элемента в массиве пишут вот такой код:
if (someArray.indexOf(someElement) >= 0) {
// whatever
}
if (someArray.indexOf(someElement) === -1) {
// whatever
}
Его можно сократить до такого:
if (~someArray.indexOf(someElement)) {
// whatever
}
if (!~someArray.indexOf(someElement)) {
// whatever
}
Чтобы улучшить читабельность этого трюка, проверку можно присвоить переменной с подходящим названием:
var isFound = ~someArray.indexOf(someElement);
if (isFound) {
// whatever
}
Конвертация arguments в массив
Для нормальной работы с arguments в JS не хватает инструментария, поэтому потребность преобразовать arguments к обычному массиву возникает часто. И первое, что удастся загуглить, будет
argsArray = Array.prototype.slice.call(arguments);
Этот вызов можно сократить до
argsArray = [].slice.call(arguments);
Ведь у экземпляра массива тоже есть доступ к прототипу, что сэкономит нам аж 13 символов.
Проверка на null, undefined и empty
Про этот трюк слышали многие, приведу его для тех, кто не знал:
if (foo !== null || foo !== undefined || foo !== '') {
bar = foo;
}
bar = foo || '';
Выводы
Хотелось бы обратить внимание еще раз, что эти примеры мы рассмотрели не для того, чтобы применять их повсеместно, а лишь для того, чтобы лучше понимать возможности некоторых конструкций в JS.
Автор: Mail.Ru Group
