Делайте больше с меньшими затратами: 10 продвинутых способов синтаксиса JavaScript для написания чистого и эффективного кода с краткостью

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

1. Нулевой оператор объединения (??)

Представленный в ECMAScript 2020 и обозначаемый как «??», нулевой оператор объединения — это логический оператор, который принимает два операнда и возвращает свой правый операнд, если его левый операнд нулевой (нулевой или неопределенный), в противном случае он возвращает его левый операнд.

Оператор объединения нулей (??) принимает два значения и возвращает второе значение, если первое равно «null» или «undefined».

Этот оператор предлагает более краткий и эффективный способ обработки значений по умолчанию в вашем коде. Перед установкой значения по умолчанию оператор объединения с нулевым значением позволяет определить, является ли значение нулевым или неопределенным. Давайте посмотрим, как это работает, исходя из его синтаксиса, который сформулирован следующим образом:

В приведенном выше синтаксисе оператор возвращает второй операнд (operand2), если первый операнд (operand1) равен null или undefined. Технически нулевой оператор объединения эквивалентен следующему блоку:

Вместо того, чтобы писать код, похожий на приведенный выше или такой:

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

Нулевой оператор объединения, например, можно использовать для определения значения переменной по умолчанию следующим образом:

В приведенном выше примере, если userAge не является нулевым или неопределенным, ему присваивается значение user.age. В противном случае для userAge будет установлено значение 25.

Использование нулевого оператора объединения внутри функции — еще одна ситуация, когда это было бы полезно:

Важно помнить, что нулевой оператор объединения отличается от логического оператора ИЛИ (||), который дает первое истинное значение операндов. Даже если первый операнд равен 0 или пустой строке, логический оператор ИЛИ все равно возвращает значение, если оно истинно. Нулевой оператор объединения возвращает значение второго операнда, только если первый операнд нулевой.

2. Нулевой объединяющий оператор присваивания

Нулевой оператор объединения, как упоминалось ранее, предоставляет краткую форму определенного выражения JavaScript. Тем не менее, одна замечательная особенность JavaScript заключается в том, что это новое выражение, используемое для присвоения значения, может быть дополнительно улучшено для создания более короткой версии с помощью оператора, известного как нулевой оператор присваивания или логический нулевой оператор присваивания (??=). .

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

Прежде чем присвоить переменной значение, вы можете использовать это, чтобы увидеть, является ли оно нулевым или неопределенным. Переменная будет назначена, если она равна null или не определена; в противном случае его текущее значение будет сохранено.

Вот как выглядит его синтаксис:

Где переменная обозначает переменную, которую вы хотите проверить, а значение обозначает значение, которое вы хотите присвоить. Как указывалось ранее, этот оператор является сокращенной формой нулевого оператора объединения. Таким образом, его полная форма будет выглядеть так:

Установка значения по умолчанию для переменной, подобной приведенной ниже, является эффективным способом использования этого оператора:

В приведенном выше примере userAge дал нам 25, поскольку его начальное значение не было определено. Тем не менее, username вернул строковое значение («sodiq»), поскольку его начальное значение не было ни пустым, ни неопределенным.

Нулевой объединяющий оператор присваивания — это один из трех логических операторов присваивания, представленных в ECMAScript 2021. Таким образом, это приводит нас к двум другим — логическому оператору присваивания ИЛИ и логическому оператору присваивания И. .

3. Логический оператор присваивания ИЛИ

Логический оператор присваивания ИЛИ — это логический оператор, который принимает два операнда и присваивает правый операнд левому операнду только в том случае, если левый операнд ложен, в противном случае он сохраняет значение левого операнда.

Давайте посмотрим на его синтаксис:

В синтаксисе (x ||= y) логический оператор присваивания ИЛИ присваивает y x только в том случае, если x является ложным.

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

• false (логическое ключевое слово false)
• 0 (Число положительного нуля)
• -0 (Число отрицательного нуля)
• 0n (ноль BigInt, также 0x0n)
• "", '', `` (значение пустой строки)
• null (тип данных — отсутствие какого-либо значения)
• неопределенный (тип данных)
• NaN (не число)
• документ.все

Любое значение за пределами выделенных выше является истинным в JavaScript и, таким образом, возвращает истину в их логическом контексте.

При этом давайте рассмотрим практический пример использования «||=»:

Выходные данные в приведенном выше примере в строке 3 вернули «untitled», поскольку переменная title была не определена, т. е. ложным значением. С другой стороны, переменная title2 имела в качестве начального значения строку «Я люблю JavaScript», поэтому «||=» не давала ей строку «без названия», скорее сохранил свое первоначальное значение.

Логический оператор присваивания ИЛИ:

является сокращением следующего выражения с использованием оператора ИЛИ:

В том же духе он также служит сокращением для следующего условного оператора:

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

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

Более того, как и оператор логического ИЛИ, назначение логического ИЛИ также приводит к короткому замыканию. Это означает, что он выполняет присваивание только в том случае, если первый операнд ложный.

4. Логический оператор присваивания И

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

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

С помощью логического оператора И мы можем применить короткие замыкания и получить следующее:

Интересно, что логический оператор присваивания И дает сокращенную форму вышеизложенного в сжатой форме, но достигает той же цели. Вот синтаксис:

Подобно логическому оператору И, логический оператор присваивания И также выполняет короткое замыкание и присваивает правый операнд левому операнду только в том случае, если левый операнд истинен. Он не проверяет нулевые или неопределенные значения. Если вам нужно проверить нулевые или неопределенные значения, вы должны использовать нулевой оператор объединения (??) или нулевой оператор присваивания объединения (??=).

5. Сокращенные имена свойств

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

Возьмем, к примеру, следующий код, в котором предполагается создать объект с двумя свойствами «x» и «y»:

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

Во втором примере значение переменной y присваивается свойству y, а значение переменной x — свойству x. Эта версия кода короче и легче читается.

Это сокращенное обозначение становится полезным для свойств объектов, когда имена переменных и свойств совпадают. Он обеспечивает краткий и более читаемый способ написания выражения JavaScript.

6. Сокращенные имена методов

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

В качестве примера рассмотрим следующий код, в котором мы хотим создать объект с помощью метода «sayName»:

Это можно записать с использованием сокращенных имен методов, например:

Во втором приведенном выше примере функция назначается методу sayName, а имя метода совпадает с именем функции. Это сокращенное обозначение может помочь сделать ваш код более разборчивым и кратким, позволяя вам создавать объект с методами, которые имеют то же имя, что и функция, которую вы ему назначаете.

Тот факт, что сокращенные имена методов привязаны к объекту, для которого они определены, означает, что ключевое слово «this» внутри метода всегда относится к объекту, для которого этот метод определен. Это еще одно преимущество использования сокращенных имен методов. Этот метод известен как «лексическое связывание». Он обеспечивает прямой доступ к дополнительным атрибутам и методам того же объекта из самого метода.

7. Деструктивное назначение

Присвоение деструктурирования — это классическая функция ES6, которую вы можете использовать для извлечения данных из массива или объекта и назначения их отдельным переменным.

Деструктуризация массива, когда значения извлекаются из массива и присваиваются отдельным переменным, выглядит так:

Точно так же деструктурирование можно использовать для извлечения значений из объекта и присвоения их отдельным переменным следующим образом:

При деструктуризации вы также можете присвоить переменным разные имена. Пример показан ниже:

Вложенные объекты и массивы также могут быть деструктурированы:

Более того, деструктурирование можно использовать в аргументах функции:

Кроме того, при деструктуризации могут быть установлены значения по умолчанию:

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

8. Шаблонные литералы

Еще одна мощная функция, представленная в ECMAScript 2015, — литералы шаблонов . Литералы шаблонов, также называемые строками шаблонов и обозначаемые обратными кавычками (``), позволяют генерировать строки, содержащие выражения.

Тот факт, что литералы шаблонов упрощают и упрощают вставку выражений в строки, является одним из его ключевых преимуществ. Например, чтобы добавить переменную в строку, используйте литералы шаблонов:

Другой вариант использования литералов шаблона — вставка результата выражения в строку:

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

Дополнительным преимуществом является простота создания многострочных строк с использованием литералов шаблонов. Без литералов шаблона для создания многострочных строк требуется объединение нескольких строк. Учтите следующее:

Литералы шаблонов упрощают и упрощают генерацию многострочных строк:

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

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

В JavaScript итерируемый объект (такой как массив или строка) может быть расширен в список отдельных элементов с помощью оператора расширения. Обозначаемый тремя точками (…), оператор распространения может быть полезен в ряде случаев, в том числе при работе с объектами и массивами.

Возьмем, к примеру, оператор распространения, который помогает нам легко объединить два массива, как показано ниже:

Его также можно использовать для создания неглубокой копии массива или объекта:

Кроме того, оператор распространения может использоваться для передачи элементов массива в качестве отдельных аргументов функций:

Устраняя необходимость в явных циклах и других многословных операциях при работе с массивами и объектами, использование оператора распространения может помочь коду JavaScript стать более кратким. Кроме того, он обеспечивает более функциональное программирование, в котором можно создавать функции для работы с конкретными предметами, а не с целыми коллекциями.

10. Остальные параметры

Функция в JavaScript может принимать любое количество параметров благодаря параметру rest, который обозначается тремя точками (…). Он создает массив, содержащий все аргументы, переданные функции. Это может быть полезно при передаче произвольного количества аргументов функции или когда вы не знаете, сколько аргументов будет передано функции.

Например, вы можете написать функцию, которая вычисляет сумму любого количества чисел, используя параметр rest:

Параметр rest вместе с деструктурированием можно использовать для присвоения первых нескольких аргументов переменным, а оставшихся аргументов — массиву. Например:

Подобно оператору расширения, параметр rest позволяет использовать парадигму программирования в более функциональном стиле и может помочь достичь краткости в коде JavaScript за счет уменьшения необходимости в явных циклах и других многословных операциях при работе с переменным числом аргументов.

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

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