JavaScript — это мощный и универсальный язык программирования, широко используемый для веб-разработки. Как разработчики, мы всегда стремимся писать чистый и эффективный код. Один из способов добиться этого — использовать методы сокращения, которые не только уменьшают объем кода, который мы пишем, но и улучшают его читабельность. В этой статье мы рассмотрим некоторые распространенные приемы сокращенного кода в JavaScript, а также приведем практические примеры, чтобы продемонстрировать их эффективность.
1. Тернарный оператор (условный оператор)
Тернарный оператор — это краткий способ написания операторов if...else. Это позволяет нам быстро принимать решения в зависимости от условий.
// Longhand
let result;
if (condition) {
result = 'Condition is true';
} else {
result = 'Condition is false';
}
// Shorthand (Ternary Operator)
let result = condition ? 'Condition is true' : 'Condition is false';
// You can also nest your if statement like this
const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";
2. Оценка короткого замыкания
Оценка короткого замыкания — это метод обработки значений по умолчанию или предотвращения ошибок при доступе к вложенным свойствам. Это особенно полезно для работы с потенциально неопределенными или нулевыми значениями.
// Longhand
let value;
if (obj && obj.property && obj.property.subProperty) {
value = obj.property.subProperty;
} else {
value = 'Default Value';
}
// Shorthand (Short-circuit Evaluation)
let value = obj?.property?.subProperty || 'Default Value';
3. Нулевой оператор объединения
Нулевой оператор объединения позволяет нам устанавливать значения по умолчанию, только когда значение равно null или undefined, не для ложных значений, таких как пустые строки или ноль.
// Longhand
let value;
if (inputValue !== null && inputValue !== undefined) {
value = inputValue;
} else {
value = 'Default Value';
}
// Shorthand (Nullish Coalescing Operator)
let value = inputValue ?? 'Default Value';
4. Стрелочные функции
Стрелочные функции обеспечивают краткий способ написания функций, особенно для простых однострочных функций.
// Longhand
function add(a, b) {
return a + b;
}
// Shorthand (Arrow Function)
const add = (a, b) => a + b;
5. Сокращение свойств объекта
При создании объекта со свойствами мы можем использовать сокращенную запись, если имена переменных совпадают с именами свойств.
// Longhand
const name = 'John';
const age = 30;
const person = {
name: name,
age: age,
};
console.log(person) // { name: 'John', age: 30}
// Shorthand (Object Property Shorthand)
const name = 'John';
const age = 30;
const person = {
name,
age,
};
console.log(person) // { name: 'John', age: 30}
6. Деструктивное назначение
Деструктуризация позволяет нам извлекать значения из объектов и массивов в отдельные переменные, упрощая доступ к их свойствам.
// Longhand
const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;
console.log({name, age}) // { name: 'John', age: 30 }
// Shorthand (Object Destructuring)
const { name, age } = { name: 'John', age: 30 };
console.log({name, age}) // { name: 'John', age: 30 }
// You can even assign your own variable names
const { name:firstName, age } = { name: 'John', age: 30 };
console.log({firstName, age}) // { firstName: 'John', age: 30 }
// Array Destructuring
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log({first, second, third}) // { first: 1, second: 2, third: 3 }
7. Оператор спреда
Используется для создания копий массивов или объектов и их объединения.
// Longhand (Array Concatenation) const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = arr1.concat(arr2); console.log(combinedArray) // [ 1, 2, 3, 4, 5, 6 ] // Shorthand (Spread Operator) const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = [...arr1, ...arr2]; console.log(combinedArray) // [ 1, 2, 3, 4, 5, 6 ]
8. Параметры функции по умолчанию
Укажите значения по умолчанию для параметров функции.
// Longhand
function greet(name) {
if (name === undefined) {
name = 'Anonymous';
}
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Anonymous!
greet('John'); // Hello, John!
// Shorthand (Default Function Parameters)
function greet(name = 'Anonymous') {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Anonymous!
greet('John'); // Hello, John!
9. Шаблонные литералы
Краткий способ объединения строк и встраивания выражений с использованием обратных кавычек (`) и ${}
// Longhand
const name = 'John';
const message = 'Hello, ' + name + '!';
// Shorthand (Template Literals)
const name = 'John';
const message = `Hello, ${name}!`;
10. Методы массива: карта, фильтр, уменьшение
Сокращенные методы для выполнения общих операций с массивами.
const numbers = [1, 2, 3, 4, 5];
// Longhand (map)
const doubled = numbers.map(function (num) {
return num * 2;
});
console.log(doubled); // Output: [2, 4, 6, 8, 10]
// Shorthand (map)
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]
// Longhand (filter)
const evens = numbers.filter(function (num) {
return num % 2 === 0;
});
console.log(evens); // Output: [2, 4]
// Shorthand (filter)
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // Output: [2, 4]
// Longhand (reduce)
const sum = numbers.reduce(function (acc, num) {
return acc + num;
}, 0);
console.log(sum); // Output: 15
// Shorthand (reduce)
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15
11. Логические операторы присваивания
Сокращение для объединения присваивания переменной с логическими операциями.
let x = 10; // Longhand x = x || 5; // If x is falsy, assign 5 to x. // Shorthand (Logical OR Assignment) x ||= 5; // If x is falsy, assign 5 to x. let y = 0; // Longhand y = y && 8; // If y is truthy, assign 8 to y. // Shorthand (Logical AND Assignment) y &&= 8; // If y is truthy, assign 8 to y.
12. Несколько объявлений переменных
Компактный способ объявить несколько переменных в одной строке.
// Longhand let a = 1; let b = 2; let c = 3; // Shorthand (Multiple Variable Declarations) let a = 1, b = 2, c = 3;
13. Оператор возведения в степень
Сокращение для вычисления степени числа.
// Longhand const result = Math.pow(2, 3); // 2^3 = 8 // Shorthand (Exponentiation Operator) const result = 2 ** 3; // 2^3 = 8
14. Для цикла
Сокращение синтаксиса цикла в JavaScript позволяет более лаконично перебирать итерируемые объекты, такие как массивы, без необходимости явно управлять переменной индекса. Это упрощает процесс итерации и повышает читаемость кода.
// Longhand
const fruits = ['apple', 'banana', 'orange'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // apple, banana, orange
}
// Shorthand
const fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
console.log(fruit); // apple, banana, orange
}
// If you just wanted to access the index, do
for (let index in fruits) {
console.log(index); // 0, 1, 2
}
// This also works if you want to access keys in a literal object
const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj) {
console.log(key); // Output: continent, country, city
}
15. Двойное побитовое НЕ
Двойное побитовое НЕ — это сокращенная техника в JavaScript, позволяющая дважды (~~) выполнить операцию побитового НЕ над числовым значением. Он часто используется как быстрый и лаконичный способ преобразования значения в целое число или округления числа до нуля.
// Longhand const num = 3.14159; const roundedNum = Math.floor(num); // Shorthand (Double Bitwise NOT) const num = 3.14159; const roundedNum = ~~num;
16. Преобразование строки в число
Чтобы преобразовать строку в число с помощью методов сокращения в JavaScript, вы можете использовать конструктор Number() или сокращение унарного оператора +.
// Longhand with the Number() constructor const stringFloat = '3.14'; const floatNumber = Number(stringFloat); console.log(floatNumber); // 3.14 // Shorthand with the unary operator '+' const stringNumber = '42'; const number = +stringNumber; console.log(number); // 42
Заключение
Используя приемы сокращения в JavaScript, мы можем значительно повысить эффективность и читабельность нашего кода. Примеры, обсуждаемые в этой статье, демонстрируют некоторые из наиболее распространенных и полезных приемов сокращенного кода. Познакомившись с этими приемами, вы обнаружите, что пишете более лаконичный и выразительный код, что ведет к улучшению практики программирования и получению большего удовольствия от разработки.
