11 сокращений JavaScript и TypeScript, которые необходимо знать для эффективного кодирования

JavaScript и TypeScript — очень популярные языки программирования в области веб-разработки. Они оба имеют обширные наборы функций и множество сокращений синтаксиса, которые значительно способствуют повышению эффективности кодирования.

Узнайте, как усовершенствовать код и максимально эффективно использовать эти языки с помощью нескольких полезных сочетаний клавиш.

1. Тернарный оператор

Тернарный оператор предлагает краткий и эффективный синтаксис для выражения условных операторов. Он состоит из трех частей: условия, выражения, которое выполняется, если условие истинно, и выражения, которое выполняется, если оно ложно.

Этот оператор оказывается особенно полезным при принятии решений на основе условий и соответствующем присвоении различных значений.

Рассмотрим следующий пример:

константа возраст = 20;
константа ageType = возраст >= 18? «Взрослый»: "Ребенок";
консоль.log (тип возраста); // Вывод: "Взрослый"

В этом примере используется тернарный оператор, чтобы проверить, является ли переменная возраст Больше или равно 18. Если это так, код присваивает значение Взрослый к переменной возрастТип, в противном случае присваивается значение «Дочерний».

2. Литералы шаблонов

Литералы шаблонов предлагают мощный и эффективный способ форматирование строк JavaScript и включение в них переменных или выражений. В отличие от традиционной конкатенации строк с использованием одинарных или двойных кавычек, литералы шаблонов используют обратные кавычки (`).

Этот уникальный синтаксис дает несколько преимуществ при работе со строками. Рассмотрим следующий пример, демонстрирующий использование литералов шаблонов:

константа имя = "Алиса";
константа приветствие = `Здравствуйте, $ {имя}!`;
консоль.log (приветствие); // Вывод: "Привет, Алиса!"

Пример включает в себя имя переменная в литерале шаблона с использованием ${}. Это позволяет легко создавать динамические строки.

3. Нулевой оператор объединения

Нулевой оператор объединения (??) обеспечивает удобный способ присвоения значений по умолчанию, когда переменная либо нулевой или неопределенный. Он возвращает правый операнд, если левый операнд нулевой или неопределенный.

Рассмотрим следующий пример:

константа имя пользователя = нулевой;
константа отображаемое имя = имя пользователя?? "Гость";
консоль.log (отображаемое имя); // Вывод: "Гость"

В этом примере, поскольку переменная имя пользователя является нулевой, нулевой оператор объединения присваивает значение по умолчанию Гость к переменной отображаемое имя.

4. Оценка короткого замыкания

Быстрое вычисление позволяет вам писать краткие условные выражения, используя логические операторы, такие как && и ||. Он использует тот факт, что логический оператор прекратит вычисление выражений, как только сможет определить результат.

Рассмотрим следующий пример:

константа имя = "Джон";
константа приветствие = имя && `Здравствуйте, $ {имя}`;
консоль.log (приветствие); // Вывод: "Привет, Джон"

В этом примере будет оцениваться только выражение `Привет, ${имя}` если переменная имя имеет истинное значение. В противном случае происходит короткое замыкание и присваивается значение имя себя к переменной приветствие.

5. Сокращенная запись присвоения свойств объекта

При создании объектов у вас есть возможность использовать сокращенную нотацию, которая присваивает переменным свойства с тем же именем.

Эта сокращенная запись устраняет необходимость в избыточном указании как имени свойства, так и имени переменной, что приводит к более чистому и лаконичному коду.

Рассмотрим следующий пример:

константа имя = "Джон";
константа фамилия = "Доу";
константа человек = {имя, фамилия};
консоль.лог (человек); // Вывод: { firstName: "John", lastName: "Doe" }

В этом примере присваиваются свойства имя и фамилия используя сокращенную запись.

6. Необязательная цепочка

Необязательная цепочка (?.) позволяет получить доступ к вложенным свойствам объекта, не беспокоясь о промежуточных нулевых или неопределенных значениях. Если свойство в цепочке имеет значение null или не определено, выражение сокращается и возвращает значение undefined.

Рассмотрим следующий пример:

константа пользователь = { имя: "Алиса", адрес: { город: "Нью-Йорк", страна: "США" }};
константа страна = адрес пользователя?.страна;
консоль.log (страна); // Вывод: "США"

В приведенном выше примере необязательный оператор цепочки гарантирует, что код не выдаст ошибку, если адрес имущество или страна имущество отсутствует.

7. Деструктуризация объекта

Деструктуризация объекта — это мощная функция в JavaScript и TypeScript, которая позволяет извлекать свойства из объектов и назначать их переменным, используя краткий синтаксис.

Такой подход упрощает процесс доступа к свойствам объекта и управления ими. Давайте подробнее рассмотрим, как работает деструктуризация объекта на примере:

константа пользователь = { имя: "Джон", возраст: 30 };
константа {имя, возраст} = пользователь;
консоль.log (имя, возраст); // Вывод: "Джон" 30

В этом примере извлекаются переменные имя и возраст из пользователь объект через деструктурирование объекта.

8. Оператор спреда

Оператор спреда (...) позволяет развернуть элементы итерируемого объекта, например массива или объекта, на отдельные элементы. Это полезно для объединения массивов или создания их неглубоких копий.

Рассмотрим следующий пример:

константа числа = [1, 2, 3];
константа новыеЧисла = [...числа, 4, 5];
консоль.log (новые числа); // Вывод: [1, 2, 3, 4, 5]

В приведенном выше примере оператор спреда расширяет числа массив на отдельные элементы, которые затем объединяются с 4 и 5 создать новый массив, новые номера.

9. Сокращение цикла объектов

При переборе объектов вы можете использовать для... в цикл в сочетании с деструктурированием объекта для удобного перебора свойств объекта.

Рассмотрим этот пример:

константа пользователь = { имя: "Джон", возраст: 30 };
для (константа [ключ, значение] изОбъект.entries (пользователь)) { 
консоль.бревно(`${ключ}: ${значение}`);
}
// Выход:
// имя: Джон
// возраст: 30

В приведенном выше примере Object.entries (пользователь) возвращает массив пар ключ-значение, которые затем на каждой итерации деструктурируются в переменные ключ и ценить.

10. Array.indexOf Сокращение с использованием побитового оператора

Вы можете заменить звонки на Array.indexOf метод с сокращением, использующим побитовый оператор ~ чтобы проверить, существует ли элемент в массиве. Сокращение возвращает индекс элемента, если он найден или -1 если не найдено.

Рассмотрим следующий пример:

константа числа = [1, 2, 3];
константа индекс = ~ числа.indexOf (2);
консоль.log (индекс); // Выход: -2

В приведенном выше примере ~numbers.indexOf (2) возвращается -2 потому что 2 находится в индексе 1, а побитовый оператор инвертирует индекс.

11. Приведение значений к Boolean With!!

К явно преобразовать значение для логического значения вы можете использовать оператор двойного отрицания (!!). Он эффективно преобразует истинное значение в истинный и ложное значение для ЛОЖЬ.

Рассмотрим следующий пример:

константа значение1 = "Привет";
константа значение2 = "";
консоль.log(!!значение1); // Вывод: правда
консоль.log(!!значение2); // Вывод: ложь

В приведенном выше примере !!значение1 возвращается истинный потому что строка Привет является правдивым, в то время как !!значение2 возвращается ЛОЖЬ потому что пустая строка ложна.

Повышение эффективности и удобочитаемости кода

Используя эти сокращения в JavaScript и TypeScript, вы можете повысить эффективность кодирования и создавать более лаконичный и читаемый код. Будь то использование тернарного оператора, краткое вычисление или использование возможностей шаблонных литералов, эти сокращения предоставляют ценные инструменты для эффективного кодирования.

Кроме того, сокращенное назначение свойств объекта, необязательная цепочка и деструктуризация объекта упрощают работу с объектами, а оператор распространения и сокращение массива позволяют эффективно работать с массивом манипуляция. Овладение этими сокращениями сделает вас более продуктивным и эффективным разработчиком JavaScript и TypeScript.