На момент написания статьи новые функции предложения JavaScript, упомянутые в этой статье, находились на этапе 4 и почти наверняка будут включены в ES2021. ты уже можешь начатьПоследняя версия браузера, используемая в Node.js и Babel..
Примечание. ECMAScript — это стандарт, на котором основан JavaScript и который регулируется комитетом TC39. ECMAScript — это всегда нежелательное имя, которое сбивает с толку новичков. Люди часто говорят о функциях JavaScript, но ссылаются на спецификацию ECMAScript.
Обновить функции
-
разделитель чисел(
_) -
логическое назначение(
&&=,||=,??=) -
занижение(
WeakRefа такжеFinalizationRegistry) - Promise.any
- String.prototype.replaceAll
1. Числовой разделитель
Человеческому глазу сложно быстро разобрать большие числовые литералы, особенно когда много повторяющихся чисел:
1000000000000 1019436871.42
Чтобы улучшить читаемость,Новые возможности языка JavaScriptВключено подчеркивание в качестве разделителя в числовых литералах. Таким образом, приведенное выше теперь можно переписать как тысячу цифр, например:
1_000_000_000_000 1_019_436_871.42
Теперь проще сказать, что первое число равно 1 триллиону, а второе число около 1 миллиарда.
Числовые разделители помогают улучшить читаемость различных числовых литералов:
// A decimal integer literal with its digits grouped per thousand:
1_000_000_000_000
// A decimal literal with its digits grouped per thousand:
1_000_000.220_720
// A binary integer literal with its bits grouped per octet:
0b01010110_00111000
// A binary integer literal with its bits grouped per nibble:
0b0101_0110_0011_1000
// A hexadecimal integer literal with its digits grouped by byte:
0x40_76_38_6A_73
// A BigInt literal with its digits grouped per thousand:
4_642_473_943_484_686_707n
Они работают даже с восьмеричными целочисленными литералами (хотяя не могу думать об этомгде разделитель предоставляет значения для таких литераловпример):
// A numeric separator in an octal integer literal: 🤷♀️
0o123_456
Обратите внимание, что JavaScript также имеет функции без явного0oУстаревший синтаксис для восьмеричных литералов с префиксом. Например,017 === 0o17. Этот синтаксис не поддерживается в строгом режиме или в модулях и не должен использоваться в современном коде. Поэтому эти литералы не поддерживают разделители цифр. использовать0o17стиль текста вместо этого.
2. Promise combinators
С момента появления промисов в ES2015 JavaScript полностью поддерживает два комбинатора промисов: статический метод Promise.all и Promise.race.
В настоящее время в процессе стандартизации проходят два новых предложения: Promise.allSettled и Promise.any. С этими дополнениями в JavaScript будет четыре комбинатора промисов, каждый из которых поддерживает свой вариант использования.
Вот обзор четырех комбинаторов:
2.1 Promise.allSettled
Обещайте .allySetled обещает вам, когда весь входной сигнал является расчетом, что означает, что они выполняются или отказываются. Если вы не заботитесь о состоянии обещания, но просто хотел знать, когда работа завершена, независимо от того, прошло успешно, это очень полезно.
Например, вы можете инициировать серию независимых вызовов API и использовать Promise.allSettled, чтобы убедиться, что все они завершены, прежде чем делать другие вещи, такие как удаление счетчика загрузки:
const promises = [
fetch('/api-call-1'),
fetch('/api-call-2'),
fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.
await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).
removeLoadingIndicator();
2.2 Promise.any
Promise.anyМетоды иPromise.raceАналогично - до тех пор, пока одна из заданных итерацийpromiseуспех, бери первымpromisevalue в качестве возвращаемого значения, но сPromise.raceРазница в том, что он ждет, пока всеpromiseПосле всех сбоев возвращается ошибочное значение:
const promises = [
fetch('/endpoint-a').then(() => 'a'),
fetch('/endpoint-b').then(() => 'b'),
fetch('/endpoint-c').then(() => 'c'),
];
try {
const first = await Promise.any(promises);
// Any of the promises was fulfilled.
console.log(first);
// → e.g. 'b'
} catch (error) {
// All of the promises were rejected.
console.assert(error instanceof AggregateError);
// Log the rejection values:
console.log(error.errors);
// → [
// <TypeError: Failed to fetch /endpoint-a>,
// <TypeError: Failed to fetch /endpoint-b>,
// <TypeError: Failed to fetch /endpoint-c>
// ]
}
В этом образце кода проверяется, какая конечная точка отвечает быстрее всего, и регистрируется. только тогда, когдавсеКогда все запросы терпят неудачу, мы, наконец, вводим кодcatchblock, а затем обрабатывать там ошибки.
Promise.anyОтказался представлять сразу несколько ошибок. Для поддержки этой функции на уровне языка был введен новый тип ошибок, называемыйAggregateError. В дополнение к основному использованию приведенного выше примера его также можно построить в программировании.AggregateErrorобъект, как и другие типы ошибок:
const aggregateError = new AggregateError([errorA, errorB, errorC], 'Stuff went wrong!');
3. Weak references and finalizers
Эта функция содержит два дополнительных объектаWeakRefа такжеFinalizationRegistry. В зависимости от варианта использования эти интерфейсы можно использовать по отдельности или вместе. Их правильное использование требует тщательного рассмотрения, и, если возможно, их лучше избегать.
Вообще говоря, в JavaScript ссылки на объекты строго сохраняются, а это означает, что пока ссылка на объект удерживается, он не будет удален сборщиком мусора.
const ref = { x: 42, y: 51 };
// 只要我们访问 ref 对象（或者任何其他引用指向该对象），这个对象就不会被垃圾回收
В настоящее время в JavaScript WeakMap и WeakSet являются уникальными способами для слабых ссылок на объекты: добавляйте объекты в качестве ключа к Weakmap или WeakSet, и это не блокирует их обучение.
WeakMap в JavaScript на самом деле не является слабой ссылкой: на самом деле он строго ссылается на свое содержимое, пока ключ еще жив. WeakMap слабо ссылается на свое содержимое только после того, как ключ был удален сборщиком мусора.
WeakRef — это API более высокого уровня, который предоставляет настоящие слабые ссылки. Экземпляры Weakref имеют метод deref, который возвращает исходный объект, на который ссылаются, или undefined, если исходный объект был собран.
Ссылки на объекты в JavaScript являются сильными ссылками. WeakMap и WeakSet могут предоставить некоторые функции слабых ссылок. Если вы хотите реализовать настоящие слабые ссылки в JavaScript, вы можете использовать WeakRef и Finalizer вместе для достижения этого.
WeakRefэто объект, используемый для ссылки на целевой объект, который сохраняет его, не выходя из сборки мусора. Если целевой объект не утилизируется сборщиком мусора, WeakRefs можно разыменовать, чтобы разрешить доступ к целевому объекту.
// Create a WeakRef object referring to a given target object
const ref = new WeakRef(targetObject)
// Return the WeakRef instance's target object, or undefined if the target object has been garbage-collected
const obj = ref.deref()
использоватьFinalizationRegistryОбъекты могут запрашивать обратные вызовы при сборке мусора.
// Create a registry object that uses the given callback
const registry = new FinalizationRegistry([callback])
// Register an object with a registry instance so that if the object is garbage-collected, the registry's callback may get called
registry.register(target, heldValue, [unregisterToken])
// Unregister a target object from a registry instance
registry.unregister(unregisterToken)
Больше информации:Предложение TC39,V8
4. String.prototype.replaceAll
В настоящее время невозможно заменить все экземпляры подстроки в строке без использования глобального регулярного выражения. При использовании со строковыми параметрамиString.prototype.replaceВлияет только на первое вхождение.
String.prototype.replaceAll()предоставит разработчикам простой способ выполнить эту общую базовую операцию.
'aabbcc'.replaceAll('b', '.') // 'aa..cc'
'aabbcc'.replaceAll(/b/g, '.') // 'aa..cc'
5. Логическое назначение
Поддержка с новыми назначениями операционной логики&&=,||=а также??=. с ихМатематические и побитовые аналоги отличаются, логические назначения следуют короткому замыканию соответствующих логических операций. Они выполняют присваивания только в том случае, если логические операции будут оценивать правую часть.
// falsy: false, 0, -0, 0n, "", null, undefined, and NaN
// truthy: all values are truthy unless defined as falsy
// nullish: null or undefined
a ||= b
// Logical OR assignment
// Equivalent to: a || (a = b);
// Only assigns if a is falsy
a &&= b
// Logical AND assignment
// Equivalent to: a && (a = b);
// Only assigns if a is truthy
a ??= b
// Logical nullish assignment
// Equivalent to: a ?? (a = b);
// Only assigns if a is nullish
5.1 Конкретные примеры
с участием&&логический оператор присваивания для операторов
Присвойте значение переменной RHS переменной LHS, только если значение LHS истинно.
// Logical Assignment Operator with && operator
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2
с участием||Оператор логического присваивания
Значение переменной RHS присваивается переменной LHS только в том случае, если значение LHS равно false.
// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2
с участием??логический оператор присваивания для операторов
ES2020 представил оператор объединения null, который также можно комбинировать с оператором присваивания. Значение переменной RHS присваивается переменной LHS только в том случае, если LHS не определено или просто имеет значение null.
// Logical Assignment Operator with ?? operator
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// Line 5 can also be written as following ways
// num1 ?? (num1 = num2)
обобщать
Как разработчик, с новыми функциями язык очень важен.
Некоторые из вышеперечисленных новых функций, которые будут выпущены в 2021 году и которые являются предложениями для перехода на этап 4 и почти наверняка будут включены, уже реализованы в последних версиях браузеров и Babel.
Добро пожаловать в публичный аккаунт: "Полная практика стека",Отвечать "электронная книга" получить160Эта передовая книга сущности.
Справочная статья:JavaScript Features in 2021
Прошлые эссе
-
Vue3 Family Bucket + Element Plus + Vite + TypeScript + Eslint Рекомендации по настройке проекта
-
10 продвинутых советов по повышению уровня счастья в TypeScript
-
Оглушительный! Visual js: демонстрация динамического графика — цикл событий цикл событий
Прочитав эту статью, если у вас есть усиление, вы можетепоставить лайк, это будет для меня движущей силой, чтобы продолжать делиться, спасибо~