Разработка JavaScript шла медленнее перед введением ES6 (также известного как ECMAScript 2015). Теперь, в 2020 году, последние функции JavaScript были доработаны и выпущен как ECMAScript 2020 (или ES2020). Хотя ES2020 не включает в себя столько функций, сколько они были представлены в ES6, он внес ряд полезных дополнений. В этой статье я расскажу о моих любимых новых функциях ES2020.
Необязательная цепочка
Синтаксис Optional Chaining позволяет вам получать доступ к глубоко вложенным объектам, не беспокоясь о том, существует ли свойство или нет. При работе с объектами вы должны быть знакомы с ошибкой такого рода:
TypeError: Cannot read property <xyz> of undefined
Вышеупомянутая ошибка означает, что вы пытаетесь получить доступ к свойству неопределенной переменной. Чтобы избежать подобных ошибок, ваш код будет выглядеть так:
Вместо проверки каждого узла с этими случаями легко справляется необязательная цепочка. Ниже приведен тот же пример с использованием необязательной цепочки:
Вы также можете проверять массивы и функции с помощью Optional Chaining. Пример приведен ниже:
globalThis
JavaScript используется в различных средах, таких как веб-браузеры, Node.js, Web Workers и т. Д. Каждая из этих сред имеет свою собственную объектную модель и разный синтаксис для доступа к ней. ES2020 предоставляет нам свойство globalThis, которое всегда относится к глобальному объекту, независимо от того, где вы выполняете свой код. Это свойство действительно проявляется, когда вы не уверены, в какой среде будет выполняться код.
Ниже приведен пример использования функции setTimeout в Node.js с использованием globalThis:
Ниже тот же метод используется в веб-браузере:
Динамический импорт
Динамический импорт - одна из моих любимых функций ES2020. Как следует из названия, вы можете динамически импортировать модули. При использовании динамического импорта код по мере необходимости доставляется небольшими пакетами (вместо загрузки одного большого пакета, как требовалось ранее).
При использовании динамического импорта ключевые слова импорта могут вызываться как функция, которая возвращает обещание. Ниже приведен пример того, как вы можете динамически импортировать модуль, когда пользователь нажимает кнопку:
Оператор нулевого слияния
Синтаксис этого оператора:
let student = {}
let name = student.name ?? ‘John’
Этот оператор вернет операнд правой стороны, если операнд левой стороны либо не определен, либо равен нулю. В приведенном выше примере оператор установит значение имени как «Джон», поскольку имя ученика не определено.
На первый взгляд это выглядит точно так же, как логический оператор OR (||), однако, логический оператор OR Операнд правой стороны, когда операнд левой стороны имеет значение false (undefined, null, «», 0, false, NaN). Ниже приводится сравнение обоих операторов:
Связывание нулевого оператора слияния (??) с операторами AND (&&) или OR (||)
Невозможно напрямую связать операторы AND (&&) и OR (||) с ?? оператор. Если вам нужно их объединить, вы должны обернуть && или || оператор в скобках
BigInt
BigInt - это новый числовой примитив в JavaScript, который позволяет нам безопасно хранить и обрабатывать большие целые числа, даже превышающие безопасный предел целых чисел для Numbers. Это открывает бесчисленные новые возможности для математических операций. Переменные теперь могут представлять числа²⁵³, а не только максимальное значение 9007199254740992.
Чтобы создать BigInt, добавьте суффикс 'n' к любому целочисленному литералу. Например, 10 становится 10n. Для преобразования любого числа в BigInt используйте глобальную функцию BigInt (number).
Promise.allSettled ()
Этот метод возвращает обещание, которое разрешается после того, как все данные обещания выполнены или отклонены. Обычно он используется, когда успешное выполнение асинхронных задач не зависит друг от друга, как показано в следующем примере:
Подробнее о методах JavaScript Promise
Заключение
Внедрение новых функций ES2020 добавляет еще больше гибкости и мощности постоянно развивающемуся JavaScript. В этой статье были рассмотрены некоторые из моих любимых функций, но есть ряд других, которые я предлагаю вам изучить, чтобы выбрать, что вам больше всего подходит. Я надеюсь, что вы нашли эту статью полезной и что вы так же взволнованы, как и я, от использования этих функций!
