Введение

ES11 — это версия, выпущенная ассоциацией ECMA в июне 2020 года. Она также называется ES11, поскольку является одиннадцатой версией ECMAScript.

Сегодня мы объясним новые возможности ES11.

ES11 представляет 9 новых функций, мы объясним их одну за другой.

динамический импорт

До ES11 мы могли импортировать модули следующим образом:

import * as TestModule from "./test-module.js";

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

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

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

const baseModulePath = "./baseModules";
const btnImportModule = document.getElementById("btnImportModule");
let userList = [];

btnImportModule.addEventListener("click", async e => {
  const userModule = await import(`${baseModulePath}/users.js`);
  
  userList = userModule.getUsers();
});

В приведенном выше коде мы определяем базовый путь к модулю.Нажав кнопку на странице, мы можем динамически загрузить модуль users.js, а затем вызвать метод модуля getUsers() для получения списка пользователей.

import.meta

В дополнение к динамическому импорту модулей, импорт также предоставляет метаатрибут мета, который содержит информацию о текущем импортированном модуле.В настоящее время в нем есть атрибут url, который представляет URL-адрес, на который ссылается модуль. Если вы хотите использовать информацию об URL, вы можете использовать import.meta.url в коде.

экспорт усилен

import是在ECMAScript 2015中引入的，主要被用来做模块的引入，import可以引入整个模块，也可以引入部分模块。 Следующим образом:

import {something} from "./test-module.js";
import * from "./test-module.js";

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

export {something} from "./test-module.js";
export * from "./test-module.js";

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

import * as myModule from "./test-module.js";
export {myModule};

Если вы используете расширение экспорта, вам не нужно использовать импорт, вы можете напрямую использовать экспорт для экспорта:

export * as {myModule} from "./test-module.js";

BigInt

ES11 представил новый тип данных BigInt.До этого объектом, представляющим числа в JavaScript, был Number, который может представлять 64-битные числа с плавающей запятой. Конечно, он также может представлять целое число, но максимальное значение, представленное целым числом, равно 2^53, что также может быть представлено как Number.MAX_SAFE_INTEGER.

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

Как это сделать?如果只是存储的话，可以存储为字符串，但是第二种字符串就不适用了。于是引入了BigInt来解决这个问题。要表示BigInt，只需要在数字的后面加上n即可。

const bigInt = 112233445566778899n;

Или используя конструктор для построения Bigint:

const bigInt = BigInt("112233445566778899");

Вы можете использовать typeof, чтобы увидеть тип bigInt. Следует отметить, что, хотя и Number, и BigInt представляют собой числа, их нельзя смешивать: нельзя добавлять Number и BigInt. Это вызовет исключение TypeError.

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

matchAll()

Сопоставление регулярных выражений — очень распространенная операция. Обычно мы используем regExp.exec для выполнения регулярного сопоставления. Пример регулярного сопоставления:

const regExp = /yyds(\d+)/g;
const text = 'yyds1 is a very good yyds2';
let matches;

while ((matches = regExp.exec(text)) !== null) {
  console.log(matches);
}

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

["yyds1","1"]
["yyds2","2"]

Получаем все совпадающие значения. Однако для обхода необходимо использовать цикл, который неудобен в использовании.Для простоты в ES11 введен метод matchAll(). Этот метод может просто возвращать итератор, и, обходя итератор, вы можете получить все совпадающие значения, как показано ниже:

const regExp = /yyds(\d+)/g;
const text = 'yyds1 is a very good yyds2';
let matches = [...text.matchAll(regExp)];

for (const match of matches) {
  console.log(match);
}

globalThis

Для JavaScript метод получения глобальных объектов, соответствующих разным окружениям, тоже разный: для браузеров это обычно Window, но в Web Worker используется Self, а в NodeJS — Global.

Чтобы решить проблему различных глобальных объектов в различных средах, ES11 представил Globalthis. Через этот глобальный объект программисты больше не нужно отличить какую среду, в которой они, просто используйте Globalthis.

Promise.allSettled()

С момента появления промисов существует два метода объединения промисов: Promise.all() и Promise.race(), которые соответственно возвращают все промисы и возвращают самый быстрый из них.

Для Promise.all() он будет ждать, пока все промисы закончат выполнение и вернутся, если одно из них будет отклонено, то весь Promise.all() будет отклонен. В этом случае, если один промис отклонен, результаты других промисов не могут быть получены.

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

const promises = [promise1("/do1"), promise2("/do2")];
const allResults = await Promise.allSettled(promises);
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

оператор

Оператор ?? — это операция, которая определяет, является ли он пустым, а затем присваивает значение.Если такого оператора нет, мы обычно используем ||, чтобы просто выполнить эту операцию, как показано ниже:

const yourAge = someBody.age || 18

Вышеприведенный код означает, что если Someone.age пуст, установите YOURGE на 18.

Но есть проблема с приведенным выше кодом: если someBody.age=0, приведенная выше логика также верна. использовать? ? Операторы могут решить эту проблему.

const yourAge = someBody.age ？？ 18

?. оператор

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

const age = school?.class?.student?.age;

Как показано выше, это очень сложная непрерывная операция записи, но использование ?. становится очень простым.

Тот же ?. можно использовать и в методах объекта:

const age = student.getAge?.();

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

Суммировать

Практически все современные браузеры поддерживают ES11, кроме IE. Не стесняйтесь опробовать новые функции ES11.

Эта статья была включена вwww.flydean.com

Самая популярная интерпретация, самая глубокая галантерея, самые краткие уроки и множество трюков, о которых вы не знаете, ждут вас!

Добро пожаловать, чтобы обратить внимание на мой официальный аккаунт: «Программируйте эти вещи», разбирайтесь в технологиях, лучше поймите себя!