11 сверхполезных советов для JavaScript разработки
1. Преобразование в Boolean с помощью оператора !!
Иногда нам необходимо проверить существование переменной или наличие у нее верного значения. Для подобной проверки вы можете использовать !! (оператор двойного отрицания).
Просто наберите !!переменная, что автоматически преобразует любой вид данных в boolean, и переменная вернет false, только если ей соответствует: 0, null, unidentified или NaN. В противном случае вернется true.
Вот простой практический пример:
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.
2. Преобразование в число с помощью оператора +
Это просто магия! В то же время это очень просто сделать, хотя работает эта операция только со строчными числами, в противном случае она возвращает NaN (не число).
Посмотрите на следующий пример:
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
Такой трюк также сработает и для Date. В этом случае вернется временная метка :console.log(+new Date()) // 1461288164385
3. Упрощенные условные конструкции
Если вы видите код наподобие:
if (connected) {login();}Вы можете сократить его с помощью комбинации переменной (которая подвергнется верификации) и функции, поставив между ними оператор && (И).
В результате предыдущий код стал меньше на одну строку:
connected && login();То же самое вы можете сделать, чтобы проверить, существует ли в объекте определенный атрибут или функция.
Например, как сделано здесь:
user && user.login();4. Задание значений по умолчанию с помощью оператора ||
На сегодняшний день в 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); // 27var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25
5. Кэширование array.length в цикле
Это очень простой совет, но он способен оказать существенное влияние на качество обработки больших массивов в цикле. Практически все для итерации массива пишут так:
for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}
Это вполне нормально, если вы работаете с небольшими массивами. Однако, если вы обрабатываете крупные, этот код будет пересчитывать размер массива в каждой итерации цикла, и в итоге возникнут задержки.
Этого можно избежать, если кэшировать array.length в переменную. В этом случае не придется вызывать array.length при каждом повторении цикла:
var length = array.length;
for(var i = 0; i < length; i++) {
console.log(array[i]);
}
Для сокращения можно написать код следующим образом:
for(var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}
6. Получение элементов массива с конца
Выражение Array.prototype.slice(begin, end) способно обрезать массивы, если указаны аргументы начала и завершения. Но если вы эти аргументы не зададите, то функция автоматически установит максимальное для массива значение.
Я думаю, мало кто знает, что эта функция может также принимать отрицательные значения. Если вы зададите такое в качестве начального аргумента, то получите элементы массива с его конца.
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]
7. Усеченный массив
Эта техника может ограничивать размер массива. Она может быть очень полезна для удаления некоторых его элементов, не затрагивая те, которые вам нужны.
Например, у вас есть массив с 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]
8. Заменить все
Функция string.replace() позволяет вам использовать строки с регулярными выражениями для замены других строк. По умолчанию такая функция заменяет только первый элемент, но вы можете обработать все элементы, использовав replaceAll() и добавив /g в конце regex:
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"
9. Преобразование NodeList в Arrays
Если вы запустите функцию document.querySelectorAll("p"), то она вернет массив элементов DOM, объект NodeList. Но этот объект не будет иметь всех функций массива, включая sort(), reduce(), map(), filter().
Для того, чтобы активировать все эти и другие базовые возможности массива, вам необходимо преобразовать NodeList в Array. Для осуществления этого просто запустите следующую функцию: [].slice.call(elements):
var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array// This is another way of converting NodeList to Arrayvar arrayElements = Array.from(elements);
10. Слияние массивов
Для совмещения двух массивов используйте функцию 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];
11. Перемешивание элементов массива
Чтобы перемешать элементы массива, не прибегая ко внешней библиотеке вроде Lodash, просто используйте такой трюк:
var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
Перевод статьи Javascript Jeep🚙💨: 11 Extremely Useful JavaScript Tips
Комментарии