Современные сокращения JavaScript
Короткие альтернативы могут помочь сократить количество строк кода и сэкономить много времени. В этой статье я расскажу о нескольких часто используемых коротких руках.
1. Оценка короткого замыкания
- Следующее сокращение использует логическое ИЛИ ( || ) для присвоения значения по умолчанию переменной. Если левая часть ( || ) имеет неложное значение, она будет присвоена переменной, если не будет присвоено значение по умолчанию (правая часть оператора).
От руки
let baseUrl;
// Conditionally assign value if baseurl exists from env file.
if (process.env.baseurl) {
baseUrl = process.env.baseurl;
}
else {
baseUrl = "www.google.com";
}
Стенография
const baseUrl = process.env.baseUrl || "www.google.com"
- Имейте в виду, что 0 считается ложным значением в этом операторе. Если 0 является значением, которое должно быть там, используйте вместо этого нулевой оператор объединения. (??)
2. Преобразовать строку в целое число.
- Унарный оператор или широко известный как (+) может использоваться для преобразования строки, которая является числом, в целочисленный формат.
От руки
const numberInString = "10"; const number = parseInt(numberInString);
Стенография
// We can convert any number in string format to a number using the + operator const numberInString = "10"; const number = +numberInString;
- Имейте в виду, что нецелочисленные строки, такие как «abc» или «1.21», будут выводить NaN, поскольку ожидаются только целые числа.
3. Тернарный оператор
- Тернарный оператор или условный оператор — это простой и понятный подход вместо операторов if … else.
От руки
const marks = 80;
let grade;
if (marks >= 50) {
grade = 'pass';
} else {
grade = 'fail';
}
Стенография
const marks = 80; const grade = marks>=50 ? "pass" : "fail";
4. (?.) Необязательная цепочка (Typescript)
- С использованием ? наряду с точечной нотацией мы можем получить доступ к значениям объекта. Когда ключ или значение не существует в точечной нотации, выдается ошибка, но если используется необязательная цепочка, возвращается неопределенное значение и продолжается выполнение программы.
От руки
const student = {
Gerald: {
marks: 50,
},
};
// Print the marks of the student.
// If we dont check this and if student is undefined it will throw an error
if (student && student.Gerald&& student.Gerald.marks ) {
console.log(student.Gerald.marks)
}
Стенография
const student = {
Gerald: {
marks: 50,
},
};
// Print the marks of the student.
console.log(student?.Gerald?.marks) // Will not throw an error if value is empty
5. Оператор спреда
- Оператор распространения можно использовать для доступа к значениям из массивов и объектов. Общие функции массива, такие как concat, можно легко заменить с помощью оператора распространения.
- Объединить два массива
От руки
const array1 = [1,2]; let array2; array2 = array1.concat([3,4,5]);
Стенография
const array1 = [1,2]; let array2; array2 = [...array1, 3,4,5];
6. Остальные параметры (…)
- Параметр rest может использоваться для принятия неизвестного количества аргументов.
От руки
const add2Numbers = (num1,num2) => {
return num1+num2;
}
const add3Numbers = (num1,num2,num3) => {
return num1+num2+num3;
}
add2Numbers(1,2);
add3Numbers(1,2,3);
Стенография
const addAll = (...numbers) => {
let total = 0;
for (let num of numbers) total += num;
return total;
}
addAll(1,2);
addAll(1,10,50);
addAll(20,20,1231,111);
// All of the above syntaxes will work and functions will not have to be defined again
7. Деструктуризация
- Как следует из названия, деструктурирование можно использовать для извлечения определенных элементов, которые необходимы. Используя эту концепцию, переменным можно легко присваивать значения из массивов и объектов.
- Получить значения из объектов
От руки
const student = {name: "Purple", skill: "UI/UX"};
const name = student.name;
const skill = student.skill;
console.log(name); // Purple
console.log(skill); // UI/UX
Стенография
const student = {name: "Purple", skill: "UI/UX"};
// Required values can be taken out from the object as seperate variables
const {name, skill} = student;
console.log(name); // Purple
// Refactor to an alias of your choice
const {name: firstName} = student;
console.log(firstName); // Purple
// Set default value if it doesnt exist.
const {name, age=24 } = student;
console.log(age); // 24
- Получить значения из массивов
От руки
const phase = ["Kratos","Oops","Saber","Garfield","Mojo"]; const value1 = phase[0]; // Kratos const value2 = phase[1]; // Oops
Стенография
const phase = ["Kratos","Oops","Saber","Garfield","Mojo"]; //desctructure values from array const [value1,value2, ...others] = phase; console.log(value1) // Kratos console.log(value2) // Oops console.log(others) // ["Saber","Garfield","Mojo"]
