Повышение производительности с помощью Javascript
Независимо от того, насколько быстро вы печатаете или насколько хорошо вы знакомы со своими ярлыками, эффективность кодирования все равно находится под угрозой!
Кодирование - это повседневная практика. Навык, который меняет и восстанавливает себя изнутри. Так что умение работать с сокращениями определенно поможет повысить продуктивность, эффективность времени и качество кода!
Короткие руки
Короткие руки - это ярлыки. В отличие от сочетаний клавиш, эти сокращения упрощают простую логику, экономя строки кода и тем самым экономя время.
Вот несколько простых повседневных задач javascript, и давайте эффективно использовать сокращения, чтобы сократить время разработки, производительность, качество и эффективность кода.
Объявление переменных
Мы склонны определять и объявлять переменные в нескольких строках кода, что ограничивает возможность записи и чтения. И нужно много времени, чтобы определить их индивидуально.
// long hand let a; let b = 1; let c = 3;
Поэтому лучше объявлять и определять их в одной строке, экономя время и силы.
// short hand let a, b = 1, c = 3;
Присвоение значений нескольким переменным
Как правило, присвоение значений переменным может занять несколько строк кода. Таким образом, затрудняется читаемость и возможность записи кода.
// long hand let x,y,z; x = 1; y = 2; z = 3;
Однако в Javascript мы также можем назначать значения нескольким переменным в одной строке. Это понятие называется деструктуризация массива.
// short hand let [x, y, z] = [1, 2, 3];
Назначение значений по умолчанию
В реальных сценариях мы могли бы столкнуться с ситуациями, когда мы хотели бы назначить значение по умолчанию для переменной, когда нет другого значения для назначения.
// long hand
let finalPermit;
let age= getAge();
if (age>= 18){
finalPermit= getAge();
}else{
finalPermit= "You must be 18!";
}
Вы можете просто установить значения по умолчанию, используя оператор OR. Он просто работает, если значение слева от оператора ложно, он присваивает значение справа.
// short hand let finalGrade= getScore() || "Failed!";
Тернарный оператор
Написание простых операторов if-else может занять много времени и времени. Занимает не менее 5 строк кода.
let points = 70;
let result;
// long hand
if (marks >= 50){
result = "pass";
}else{
result = "fail";
}
Однако в Javascript вы можете писать операторы if-else в «единственной» строке, используя тернарный оператор.
//short hand let result = marks>=50 ? "Pass" : "Fail";
Оценка короткого замыкания
В реальных приложениях есть сценарии, в которых вы можете захотеть выполнить задачу на основе логической переменной, где, если условие истинно, затем вы захотите выполнить строку кода.
// long hand
if (isLoggedIn){
redirectToHomePage();
}
Вы можете просто использовать оператор AND. Он работает, если значение слева от оператора истинно, он выполнит функцию справа.
// short hand isLoggedIn && redirectToHomePage();
Проверка нескольких условий
Проверка нескольких значений в условии if может быть утомительной.
// long hands
if (value===1 || value==="one" || value===2 || value==="two"){
console.log("Number is either 1 or 2.");
}
Следовательно, мы можем поместить все значения в массив и проверить их при проверке нескольких значений. Этого можно добиться двумя способами:
- индекс()
// short hand using indexOf()
if ([1,"one",2,"two"].indexOf(value)>=0){
console.log("Number is either 1 or 2.");
}
- включает в себя()
// short hand using includes()
if ([1,"one",2,"two"].includes(value)){
console.log("Number is either 1 or 2.");
}
Шаблонные литералы
Как правило, объединение строк с переменными может повлиять на читаемость и возможность записи кода, сильно замедляя работу.
// long hand
console.log('Hello' + name);
Вместо использования оператора + для объединения строк мы можем использовать литералы шаблонов ES6. Это означает, что вы можете просто заменить “ ” или ‘ ’ обратными кавычками `` и указать переменные внутри ${ }.
// short hand
console.log(`Hello ${name}`);
Многострочная строка
Многострочные строки могут быть неудобными при написании с использованием оператора + и \n, а также могут быть очень трудными для чтения.
// long hand
console.log('La la la la la la\n' +
'Sing a happy song');
Поэтому вместо использования оператора + с \n вы можете сразу использовать обратные кавычки ``.
// short hand console.log(`La la la la la la Sing a happy song`);
Поменять местами 2 переменные
Обмен двух переменных - это общее упражнение, и мы сталкиваемся с этим во многих реальных приложениях. Обычно нам требуется третья переменная «temp» для временного хранения значения, когда значения меняются местами.
let x = 1, y = 2; // long hand const temp = x; x = y; y = temp;
Однако, используя деструктуризацию массива Javascript, вы можете поменять местами две переменные без необходимости в третьей.
let x = 1, y = 2; // short hand [x,y] = [y,x];
Стрелочные функции
Функции наиболее широко используются при разработке приложений Javascript.
// long hand
function add(a,b){
return a+b;
}
Вы можете сократить функции, используя синтаксис стрелочной функции, как показано ниже.
// short hand const add = (a,b) => a + b;
Для петли
Написание циклов for может быть длительным, если необходимо определить переменную «count», диапазон и условие.
let arr = [1,2,3,4];
// long hand
for (let i = 0; i< arr.length; i++){
console.log(arr[i]);
}
Следовательно, есть два более простых способа справиться с этим на более высоком уровне. Таким образом уменьшается потребность в написании дополнительного кода и улучшается читаемость.
- для-из
// short hand using for-of
for (const val of arr){
console.log(val);
}
- за-в
//short hand using for-in
for (const index in arr){
console.log(arr[index]);
}
Назначение свойств объекта
Присваивание значений свойству объекта в основном практикуется разработчиками.
let firstName = "Adam";
let lastName = "naggy";
// long hand
let obj = {firstName: firstName, lastName: lastName};
Однако, если имя переменной и имя ключа объекта совпадают, мы можем просто указать только имя переменной в литералах объекта вместо ключа и значения.
// short hand
let obj = {fistName, lastName};
Преобразование строк в числа
Обычный метод преобразования строки в число - это использование метода parseInt ().
// long hand
let total = parseInt('45');
Однако с ES6 вы можете преобразовать строку в число, написав оператор + перед строкой.
// short hand let total = +'45';
Получить символ из строки
Как правило, мы использовали бы string.charAt(), передавая ему индекс желаемого символа, чтобы получить символ строки.
// long hand let string = "Hello World!" str.charAt(1);
Однако вы можете использовать оператор [] и передать индекс, чтобы получить символ из строки.
// short hand str[1];
Объединение массивов
Вы можете объединять массивы, используя Array.concat() с подмассивом, переданным в качестве параметра в concat().
let arr1 = [2,3]; //long hand let arr2 = arr1.concat([4,5]);
Вместо Array.concat() мы можем использовать оператор rest / spread для объединения массивов.
// short hand let arr2 = [...arr1, 4, 5];
Оптимизация вашего кода
Использование коротких рук действительно увеличивает скорость и эффективность вашего кода.
Меньшие строки кода означают меньшее время для компиляции кода. Следовательно, производительность лучше.
Это улучшает читаемость и удобочитаемость. Кроме того, это помогает писать более понятные тестовые примеры и намного проще выполнять тесты.
Не всегда сокращения хороши. Очень важно знать, когда это использовать. Просто помните, что при рассмотрении качества кода на первом месте всегда стоит передовой опыт.
Заключение
Javascript - это большое сообщество, пользующееся поддержкой со всего мира. Существует множество инструментов, языков и фреймворков, созданных с использованием Javascript. Даже ванильный javascript все еще используется для разработки приложений. Таким образом, являясь ведущим и широко используемым языком в мире информационных технологий.
Я надеюсь, что эта история помогла вам ускорить разработку и улучшить ваш код.
Обмен знаниями - единственный способ получить знания. Не стесняйтесь добавлять и вносить свой вклад через комментарии для тех, кто может извлечь выгоду из этой истории.
Повеселись! Наслаждайтесь кодированием!
