JavaScript ES2020: что нового?
В этом коротком мануале мы поговорим о функциях JavaScript, которые появились в обновлении ES2020. Например, операторы нулевого слияния и опциональной последовательности помогают определить синтаксис JavaScript, в то время как динамический импорт следит за тем, чтобы ваш код оставался модульным.
Приватные переменные класса
Классы содержат свойства, которые можно применять в повторно используемых модулях. Однако при повторном использовании этих свойств в различных файлах вы, возможно, захотите оставить некоторые свойства вне глобального доступа.
Решить эту проблему помогают приватные переменные класса. Такая переменная резервирует свойства и методы для использования только внутри класса. Символ решетки перед свойством и методом определяет переменную как приватную.
class Message {
#message = "Howdy";
greet() {
console.log(this.#message);
};
};
const greeting = new Message()
greeting.greet() // Howdy
console.log(greeting.#message) // #message is not defined
Обратите внимание: вызов метода greet вне класса возвращает значение; вызов console.log для приватного свойства возвращает ошибку.
Метод Promise.allSettled()
Когда вы работаете с несколькими промисами – особенно если они зависят друг от друга, – вы можете регистрировать каждый процесс для дальнейшей отладки.
С помощью Promise.allSettled() вы можете создать новый промис, который возвращается, когда промисы, переданные в качестве аргументов, разрешились:
const p1 = new Promise((res, rej) => setTimeout(res, 1000));
const p2 = new Promise((res, rej) => setTimeout(rej, 1000));
Promise.allSettled([p1, p2]).then(data => console.log(data));
Это выведет массив объектов с состоянием и значением для каждого промиса:
[
Object { status: "fulfilled", value: undefined},
Object { status: "rejected", reason: undefined}
]
В данном примере метод Promise.allSettled() предоставляет массив с состоянием и значением промисов p1 и p2.
Оператор нулевого слияния
JavaScript – это язык со слабой типизацией, а потому при присваивании переменных важно помнить о truthy и falsy значениях – то есть о «примерно истинных» и «примерно ложных» значениях. Если у вас есть объект с данными, вы можете разрешить falsy значения, такие как пустая строка или 0.
Оператор нулевого слияния (??) определяет и возвращает примерно ложные значения, когда левый операнд не равен null или undefined.
let person = {
profile: {
name: "",
age: 0
}
};
console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18
Обратите внимание, что оператор OR (||), напротив, возвращает правый операнд, если левый является ложным.
console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0
А оператор нулевого слияния возвращает ложные значения, поскольку ни свойство name, ни age не равны null или undefined.
Оператор опциональной последовательности
Еще один способ взаимодействия с falsy значениями – использование оператора опциональной последовательности (?.). Он предоставит способ доступа к неопределенным свойствам внутри объектов, если ссылка нулевая.
let person = {};
console.log(person.profile.name ?? "Anonymous"); // person.profile is not defined
console.log(person?.profile?.name ?? "Anonymous"); // no error
console.log(person?.profile?.age ?? 18); // no error
Вместо того чтобы выдавать ошибку, оператор опциональной последовательности позволяет вам взаимодействовать со свойствами, которые оцениваются как undefined.
Встроенный объект BigInt
Наибольшее число, которое может обработать JavaScript, составляет 2^53, в чем можно убедиться с помощью свойства MAX_SAFE_INTEGER.
const max = Number.MAX_SAFE_INTEGER;
console.log(max); // 9007199254740991
Любое число выше значения переменной max считается ненадежным:
console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true
С помощью встроенного объекта BigInt в вычислениях появляется возможность добавить n в конец каждого большого целого числа. Числа BigInt могут вычисляться только с другими числами BigInt.
const bigNum = 100000000000000000000000000000n;
console.log(bigNum * 2n); // 200000000000000000000000000000n
Значение BigInt для bigNum умножается на 2n, что в результате дает 200000000000000000000000000000n.
Динамический импорт
Предположим, у вас есть файл служебных функций; вы не используете их все, а импорт их зависимостей может быть пустой тратой ресурсов. Теперь async/await умеет импортировать нужные зависимости в нужные места.
Читайте также: Функции async/await в JavaScript
Давайте посмотрим на пример служебной функции в файле math.js:
const add = (num1, num2) => num1 + num2;
export { add };
Допустим, у нас также есть файл index.js, использующий предыдущую служебную функцию:
const doMath = async (num1, num2) => {
if (num1 && num2) {
const math = await import('./math.js');
console.log(math.add(5, 10));
};
};
doMath(4, 2);
Выражение await в index.js может обрабатывать импорт из файла math.js и использовать логику, содержащуюся в этом файле.
Заключение
С каждым обновлением в JavaScript появляется все больше динамических функций и определенных свойств» кроме того, повышается его производительность – если верить отзывам разработчиков и сообщества.
Tags: Javascript