6 новейших функций JavaScript

От автора: сейчас самое лучшее время для JavaScript-программистов. Веб-технологии быстро развиваются и разработчики браузеров без колебаний внедряют новые передовые свойства. Взрывное развитие требует от программиста постоянного улучшения своих навыков, чтобы оставаться конкурентноспособным в своей профессии.

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

BigInt

Когда мы работаем в JavaScript с большими целыми числами, нам часто приходится использовать сторонние библиотеки, потому что тип Number не может коректно представлять значения целых чисел больше, чем 2^53. Рассмотрим следующий пример:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

К счастью, ECMAScript недавно представил тип данных BigInt, который обеспечивает простой способ представления целых чисел, превышающих диапазон, поддерживаемый типом Number. Мы можем создать BigInt, добавляя n к целому числу. Сравним:

Также можно использовать конструктор:

Теперь вы можете выполнять арифметические операции с большими целыми числами в стандартном JavaScript без дополнительных усилий:

Важно понимать, что Number и BigInt — это два разных типа данных, и вы не можете сравнивать их с помощью оператора строгого равенства:

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

Вы можете выполнять арифметические операции с BigInt точно так же, как с Number:

Операторы прироста, уменьшения и унарного отрицания также работают должным образом. Но унарный оператор плюс (+) является исключением, и его применение к BigInt вызовет ошибку TypeError:

Оператор нулевого объединения

ES2020 добавляет еще один оператор сокращения в язык JavaScript: оператор нулевого объединения (??). Этот оператор отличается от существующих сокращающих операторов тем, что проверяет, является ли его левый операнд нулевым (null или undefined), а не ложным.

Другими словами, ?? возвращает правый операнд, только если его левый операнд равен null или undefined:

С другой стороны, логический оператор OR (||) возвращает правый операнд, если левый операнд равен 0, -0, 0n, false, «» (пустая строка), null, undefined или NaN. Сравним:

?? особенно удобен при установке значения по умолчанию для свойства или переменной. Например:

Конструктор Config предоставляет значение по умолчанию для свойства darkMode в случае, если заданное значение равно нулю или значение не задано. ?? также полезен при работе с DOM API:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Promise.any()

ES2015 представил объект промиса с двумя методами: Promise.all() и Promise.race(). ES2021 дополнительно расширяет асинхронные возможности JavaScript, добавляя Promise.any(). Этот новый метод возвращает промис, который разрешается, когда разрешается один из промисов в данной итерации, или отклоняет, если все промисы отклоняются.

Вот как это работает:

Этот код выполняет три запроса на выборку. Как только один из промисов разрешен, он возвращает промис, который разрешается со значением из этого промиса. Promise.any() отличается от Promise.race() тем, как он обрабатывает отклонение. Промис, возвращаемый Promise.any(), отклоняется только в том случае, если все промисы отклоняются:

Обратите внимание, что значение отклонения всех промисов передаются в метод catch() в виде массива. В качестве альтернативы вы можете использовать для обработки результата async и await:

Promise.allSettled()

Еще один полезный метод, который недавно был добавлен к объекту промиса — это Promise.allSettled(). Этот метод, дополняющий существующий метод Promise.all(), предназначен для возврата результата всех промисов — как отклоненных, так и разрешенных.

Вот пример:

Обратите внимание, что результат всех обещаний передается в then() в виде массива. Внутри then() метод forEach() перебирает элементы массива. Если левый операнд || оператора не является неопределенным, он будет выведен в консоль. В противном случае промис будет отклонен, и правильный операнд будет зарегистрирован.

Для сравнения, Promise.all() немедленно отклоняет, как только одно из обещаний отклоняется.

Оператор опциональной цепочки

Оператор опциональной цепочки (?.) Позволяет получить доступ к вложенному свойству без проверки каждого свойства в последовательности. Рассмотрим следующий пример:

Этот код пытается присвоить значение вложенного свойства константе. Но такого свойства в obj. не существует. Кроме того, user и profile не существует. Но благодаря оператору опциональной последовательности код возвращает undefined вместо выдачи ошибки.

Используя оператор обычной последовательности, вы получите ошибку:

Оператор опциональной последовательности также можно использовать при вызове метода объекта:

Здесь myMethod не существует в obj; однако, поскольку он вызывается с использованием оператора опциональной цепочки, возвращаемое значение не определено. Опять же, с оператором обычной цепочки вы получите ошибку.

Но что, если вы хотите получить доступ к свойству динамически? ?.[] позволяет ссылаться на переменную в скобках. Вот как это работает:

globalThis

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

В среде браузера вы можете использовать window, frames или self. В Web Workers вы можете использовать self. А в Node вы можете использовать global. Это несоответствие усложняет веб-разработчикам написание совместимых программ на JavaScript.

globalThis обеспечивает единое универсальное свойство во всех средах для доступа к глобальному объекту:

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

Заключение

JavaScript быстро развивается, и время от времени в язык добавляются новые интересные функции. В этой статье мы рассмотрели шесть новых функций JavaScript, включая BigInt, оператор нулевого объединения, Promise.any(), Promise.allSettled(), оператор опциональной цепочки и globalThis.

BigInt позволяет представлять большие целочисленные значения. Оператор нулевого объединения добавляет в JavaScript новый оператор минимального вычисления. Promise.any() и Promise.allSettled() позволяют дополнительно контролировать асинхронные операции. Оператор опциональной цепочки упрощает доступ к вложенным свойствам. И globalThis предоставляет единое универсальное свойство для всех сред для доступа к глобальному объекту.

Автор: Faraz Kelhini

Источник: blog.logrocket.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.