Оригинальный перевод:blog.bit SRC.IO / Голод 2020-Хэш-Сити-…
Автор: Махди Резви
Перевод: Сообщество Туке
В последние годы JavaScript очень быстро развивался. Особенно после выхода ES6 в 2015 году все стало лучше.
Многие новые функции теперь предлагается включить в выпуск ES2020. Хорошей новостью является то, что они были завершены. Теперь у нас есть окончательный список функций, которые появятся в долгожданном ES2020 после того, как они будут одобрены для выпуска. Некоторые из этих функций меня интересуют, потому что у меня будет много проблем с написанием кода до того, как они появятся. Давайте посмотрим, какие они!
Необязательный оператор цепочки
Лично для меня это одна из самых интересных особенностей ES2020. Я написал много программ, которые очень выиграли бы от этой новой функции.
Необязательный оператор цепочки позволяет безопасно обращаться к глубоко вложенным свойствам объекта, не проверяя существование каждого свойства. Давайте посмотрим, как эта функция может нам помочь.
Прежде чем иметь необязательный оператор цепочки
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
if (user && user.address) {
console.log(user.address.zip);
//600028
}
if (
user &&
user.address &&
user.address.prop1 &&
user.address.prop1.prop2 &&
user.address.prop1.prop2.prop3 &&
user.address.prop1.prop2.prop3.prop4
) {
console.log(user.address.prop1.prop2.prop3.prop4.value);
//sample
}
//Accessing unexisting property
console.log(user.address.prop102.po);
//Error
Как вы можете видеть выше, вы должны проверять наличие свойства на каждом уровне, чтобы избежать ошибок, связанных с тем, что свойство 'po' неопределенного не читается. По мере увеличения уровня вложенности увеличивается и количество свойств, которые проверяются вручную. Это означает, что мы должны проверять каждый уровень, чтобы убедиться, что он не вылетит при встрече с неопределенным или пустым объектом.
После наличия необязательных операторов цепочки
С введением необязательного оператора цепочки (Optional Chaining) наша работа с интерфейсом стала намного проще. Просто используя необязательный оператор цепочки?.Мы можем получить доступ к глубоко вложенным объектам, не проверяя неопределенные или пустые объекты.
Давайте посмотрим, как это работает.
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
console.log(user?.address?.zip);
// 600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
// sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined
Удивительно! ES2020 преуспел за счет введения единого оператора кода?.чтобы уменьшить столько строк кода!
Нулевой объединяющий оператор
Это еще одна особенность, которая волнует меня, когда я впервыеproposal stage, когда я узнал об этом, мне очень понравилась эта функция, потому что я столкнулся с проблемой написания отдельной функции для ручной проверки этой функции.
Оператор объединения null позволяет вам проверитьnullishзначение вместоfalseyстоимость. Нулевые значения относятся кnullилиundefinedценность . Хотя значения FASTEY - такие вещи, как пустая строка, число 0,undefined,null,false,NaNи так далее. Для вас это может звучать так же, но на самом деле это очень много значит.
Давайте посмотрим, что здесь происходит.
перед нулевым оператором объединения
Недавно я сделал проект, в котором мне нужно было включить функцию переключения темного режима. Я должен проверить, что вводtrueеще false. Если пользователь не устанавливает никакого значения, по умолчанию используетсяtrue. Вот как я реализовал это до того, как появился оператор объединения с нулевым значением:
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference;
}
return true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true
после нулевого оператора объединения
После того, как у вас есть оператор объединения null, все, что вам нужно сделать, это использовать??оператор. ненужный ifЗаявление:
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true
В основном здесь происходит следующее: если переменная darkModePreference содержитnullishvalue, затем присвойте ему значение true. Просто, коротко и понятно.
Динамический импорт (Dynamic Imports)
Эта функция поможет вашему приложению работать более эффективно, а динамический импорт позволяет динамически импортировать JS-файлы как модули в собственные приложения. До ES2020 модули должны импортироваться независимо от того, используются они или нет.
Например, допустим, нам нужно добавить функцию загрузки файлов в формате pdf.
Давайте посмотрим, как этого добиться до и после динамического импорта.
Перед динамическим импортом
На самом деле, не все посетители страницы используют возможность загрузить PDF. Однако он все еще должен быть импортирован, используют ли наши посетители или нет. Это означает, что этот модуль PDF также можно загрузить во время загрузки страницы.
import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);
Эти накладные расходы можно уменьшить, используя модули с ленивой загрузкой. Это можно сделать с помощью так называемого разделения кода (code-splitting), который уже доступен в Webpack или других инструментах упаковки модулей. Но для ES2020 мы можем использовать его напрямую без сборщиков модулей, таких как Webpack.
После динамического импорта (динамический импорт)
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})
Как видно из приведенного выше кода, модули теперь лениво загружаются только тогда, когда они необходимы. Тем самым уменьшая накладные расходы и время загрузки страницы.
Promise.allSettled
Если у вас есть сценарий, в котором задача должна быть выполнена после выполнения всех обещаний, вы можете использоватьPromise.all()метод. Но у этого метода есть недостаток. Когда любое из ваших промисов отклонено, метод Promise выдает ошибку. Это означает, что ваш код не ждет, пока все промисы будут выполнены.
Это, вероятно, не то, что вы хотите. Если вы хотите что-то вроде: «Меня не волнуют их результаты. Просто запустите их все», вы можете использовать новыйPromise.allSettled()метод. Этот метод работает, только если все ваши промисыsettledーー илиResolved, илиRejectedーー только когдаResolved.
Предыдущий обещал .allySetled
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.all(PromiseArray)
.then((data) =>
console.log("all resolved! here are the resolve values:", data)
)
.catch((err) => console.log("got rejected! reason:", err));
//got rejected! reason: null
Как упоминалось выше, когда одно из обещанийrejected, Promise выдает ошибку.
После того, как Promise.allSettled
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
//[
// {status: "fulfilled", value: 100},
// {status: "rejected", reason: null},
// {status: "fulfilled", value: "Data release"},
// {status: "rejected", reason: Error: Something went wrong ...}
//]
Хотя некоторые обещанияrejectedТеперь Promise.allSettled возвращает результаты всех промисов.
globalThis
globalThisСодержит ссылку на глобальный объект, не зависящий от среды. В браузерах глобальный объектwindowобъект. В среде Node глобальный объектglobalили в веб-воркерахself.
прежде чем иметь globalThis
На работе нам нужно будет написать общий код, который запускается одновременно в Node и браузерах.Когда мы хотим получить глобальные объекты, нам обычно нужно проделать много работы и логических суждений:
beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
beforeGlobalThis.tuture = '小若燕雀，亦可一展宏图';
после получения globalThis
мы можем напрямую использоватьglobalThisЧтобы обратиться к глобальному объекту, не беспокоясь об окружающей среде:
globalThis.tuture = '小若燕雀，亦可一展宏图';
Приведенный выше код часто используется в браузере или в среде Node, вы можете использовать его с уверенностью!
BigInt
Позволяет использовать числа больше, чем максимально разрешено в Javascript. Это числоpow(2,53)-1. Хотя это не имеет обратной совместимости, поскольку устаревшие системы счисления (IEEE 754) не могут поддерживать числа такого размера.
String.matchall
matchAll()это метод, связанный с регулярными выражениями. Этот метод возвращает срегулярное выражениевсе результаты совпадающей строкиитератор, включая группы захвата. Этот метод был добавлен в прототип String.
Какая функция в ES2020 вас больше всего волнует? Не стесняйтесь высказывать свое мнение в комментариях! ✌️
Happy Coding!
Справочные ресурсы
Хотите узнать больше интересных практических технических руководств? ПриходитьСообщество ТукеМагазин вокруг.