Спецификации ES2020 или ES11 были завершены в начале этого года. Он представил довольно много новых функций, и мы рассмотрим восемь ключевых основных моментов из нового стандарта.
Динамический импорт
Babel и Webpack позволяют нам импортировать файлы JS в качестве модулей в наше приложение условно. Динамический импорт в настоящее время поддерживается. Эта функция была принята для улучшения разделения кода в JavaScript и запроса кода по требованию (позволяя ленивую загрузку).
Пример:
Допустим, у вас есть модуль приветствия, который принимает имя и отображает приветствие для этого имени.
export const greeting = (name) => console.log(`Hello ${name}`);
Вы можете импортировать это условно в свое приложение.
const time = "morning"; // this is dynamically set to the time of day, hardcoded for example
if (time === "morning") {
const say = await import("./greeting.js");
say.greeting("Parwinder"); // Hello Parwinder
}
Частные переменные класса
У меня есть Выделенное сообщение в блоге На классе, где я говорю о частных переменных и методах. На данный момент приведем пример:
class ObjectCreator {
#meaningOfLife;
constructor(name) {
this.#meaningOfLife = 42;
}
returnMeaningOfLife() {
return this.#meaningOfLife;
}
#returnAMessage() {
return "You will do great things in life";
}
}
const myObject = new ObjectCreator("Parwinder");
console.log(myObject.returnMeaningOfLife()); // 42
console.log(myObject["#meaningOfLife"]); // undefined
console.log(myObject.#meaningOfLife); // SyntaxError
console.log(myObject.#returnAMessage); // SyntaxError
Язык обеспечивает соблюдение инкапсуляции. Это синтаксическая ошибка для обозначения # имен из Out Off Scope. Государственные и частные области не конфликтуют. Мы можем иметь как частные области #meaningoflife, так и общественные области значения в одном классе.
Дополнительная цепочка
Проверьте Дополнительная цепочка для концепции подробно. Доступ к свойствам объекта является распространенным явлением в JavaScript. Много раз эти свойства вложены. Когда вы получаете доступ к свойству на объекте, где объект отсутствует, JavaScript бросает ошибку.
? Оператор короткие цирки оценка свойства объекта. Вместо того, чтобы вернуть ошибку, продолжая оценку, необязательные цепочки прекращаются, как только она находит первый неопределенный/нулевой в цепочке и возвращает неопределенное Анкет
const myObject = {
name: "Parwinder",
car: "Cybertruck",
age: 42,
computers: {
first: {
name: "iMac",
year: 2017,
spec: {
cpu: "i7",
ram: "16GB"
}
},
second: {
name: "MacBook Pro"
}
}
}
console.log(myObject.computers.first.spec.cpu); // i7
console.log(myObject.computers.second.spec.cpu); // Cannot read property 'cpu' of undefined
Мы можем обратиться к ошибке доступа ЦП с помощью дополнительной цепочки.
myObject?.computers?.second?.spec?.cpu // undefined // Concise and easy to read code // or myObject.computers.second.spec?.cpu
Обещание. Все
ES2020 или ES11 введены Обещание. AllSettled Так что это довольно новый и должен использоваться с осторожностью Анкет Проверьте браузеры, которые вы планируете поддержать.
AllSettled Возвращает обещание, когда все обещания, предоставленные ему, либо разрешены, либо отклоняются. Возврат – это массив объектов, где каждый объект описывает результат входных обещаний.
AllSettled и Обещание. Все иметь незначительную разницу.
Обещание. Все отвергает с первым отказом от любого из обещаний, данных в качестве входных данных. Поэтому, если мы предоставим пять обещаний обещание. Все и двое из них терпят неудачу, Обещание. Все откажется от результата самой первой неудачи.
Обещание. AllSettled С другой стороны, будет ждать, пока все обещания завершит и предоставит результат каждого обещания, предоставленного в качестве входного материала (будь то разрешенное или отклоненное). Используйте обещание. Все Когда асинхронные обещания не зависят друг от друга, и вы можете повторить только те, которые потерпели неудачу. Если ваш курс действия зависит от всех асинхронных задач, выполняющихся успешно, прежде чем двигаться дальше, используйте Обещание. Все Анкет
const promise1 = Promise.resolve("Parwinder");
const promise2 = new Promise((resolve) => {
setTimeout(() => {
resolve("Lauren");
}, 2000);
});
const promise3 = Promise.reject("Robert");
const promise4 = Promise.resolve("Eliu");
Promise.allSettled([promise1, promise2, promise3, promise4]).then((data) => {
console.log(data);
});
Как только все четыре обещания выше решают/отвергнут, AllSettled передаст результат обратном вызове в тогда . Журнал будет выводить:
[{
status: "fulfilled",
value: "Parwinder"
}, {
status: "fulfilled",
value: "Lauren"
}, {
reason: "Robert",
status: "rejected"
}, {
status: "fulfilled",
value: "Eliu"
}]
Я покрыл Allsettled и любой в прошлом. Прочитайте Полное сообщение в блоге здесь Анкет
String.prototype.matchall ()
Matchall это новый метод на прототипе строк. Это позволяет нам соответствовать строке с регулярным выражением. Возврат является итератором всех соответствующих результатов.
const input = 'Hello Andy, Where is Beth? Emily was asking for her.'; const regex = /[A-E]/g; const matches = input.match(regex); console.log(matches); // [ 'A', 'B', 'E' ]
GlobalThis
Мы используем различный синтаксис для доступа к глобальному объекту в зависимости от того, где мы выполняем код. В браузере мы можем использовать окно , я или Рамка , но с веб -работниками мы ограничены себя . Это совершенно отличается в узле, где вы должны использовать Глобальный .
GlobalThis Целью предоставления стандартного способа доступа к глобальному объекту.
console.log(globalThis); // Window {...} for browsers
console.log(globalThis); // Object [global] {...} for Node
console.log(globalThis); // DedicatedWorkerGlobalScope {...} for Web Workers
Bigint
Bigint является числовым типом для обеспечения поддержки целых чисел произвольной длины (числа больше, чем 2 ** 53 - 1 или 9007199254740991).
Мы можем создать Bigint Добавив n до конца целого числа или позвонив Bigint () Анкет
const bigint = 9879846412313194464434496849n;
const bigintByMethod = BigInt("9879846412313194464434496849");
console.log(bigint); // 9879846412313194464434496849
console.log(bigintByMethod); // 9879846412313194464434496849
console.log(bigint === bigintByMethod); // true
console.log(typeof bigint); // bigint
console.log(typeof bigintByMethod); // bigint
const bigintFromExisting = BigInt(25);
console.log(bigintFromExisting); // 25
console.log(typeof bigintFromExisting); // bigint
Нулечный коалесковый оператор
NULLISH COALESCAING оператор ( ?? ) возвращает свой правый боковой операнд, когда его левая сторона нулевой или неопределенный , в противном случае возвращает левую сторону.
const luckyNumber = 0 ?? 42; console.log(luckyNumber); // 0 const employeeName = null ?? "Parwinder"; console.log(employeeName); // Parwinder
🚨 Имейте в виду, что оператор не работает над ЛОЖЬ или НАН Анкет Вот где он отличается от OR оператор. Оператор всегда возвращает правдивую ценность, тогда как ??
Если есть и другие новые функции, вы хотели бы, чтобы я покрыл, не стесняйтесь написать мне по адресу contact@bhagat.me ! Или оставьте комментарий с тем, чего мне не хватает.
Счастливого кодирования 👋🏼
Оригинал: “https://dev.to/bhagatparwinder/8-features-from-es2020-es11-you-should-know-1n9”