Внедрение новых функций ECMAScript2021

Восприятие: 🌟🌟🌟🌟🌟

Вкус: Гоночный краб

Время приготовления: 5 мин.

Эта статья попала в одноименный склад Github фронтенд-столовойgithub.com/Geekhyt, Добро пожаловать в кафетерий. Если вы считаете, что еда и вино вкусные, Звезда станет отличным поощрением для владельца кафетерия.

ECMAScript

ECMAScriptдаEcma InternationalОбнародован языковой стандарт под номером 262, также известный какECMA-262.

Ecma InternationalЭто организация, разрабатывающая международные стандарты в области информационных и коммуникационных технологий, ранее известная как Европейская ассоциация производителей компьютеров (European Computer Manufacturers Association), с интернационализацией компьютеров название учреждения было изменено на его английскую аббревиатуру.

ECMAScriptЗависит отEMCA InternationalизTC39(Technical Committee 39) Подготовлено Техническим комитетом.

TC39будет написаноECMAScriptСтандартные документы, представляемыеEcma International, и официально выпущен им.

С 2015 годаECMAScriptОфициальная версия выпускается каждый год, и год написан в названии, например「ECMAScript® 2020 Language Specification, 11th edition」, что может быть сокращено какES2020илиES11.

пять стадий процесса

Если вы хотите добавить или переписать спецификацию, вам обычно нужно пройти 5 этапов, таких какTC39 ProcessПоказано в:

• Strawperson
• Proposal
• Draft
• Candidate
• Finished

После этих 5 этапов модификации, которые перейдут в состояние Finished, будут включены в официальную версию спецификации.

ECMAScript2021

GitHub.com/Job39/предложения…

понялECMAScript, давайте введем текст ниже, давайте посмотрим на выявленные новые возможности ECMAScript2021.

1.String.prototype.replaceAll

GitHub.com/Job39/предложения…

Давайте рассмотримString.prototype.replaceПрименение:

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replace('Stay', 'Always')
console.log(newStr) // Always Hungry. Stay Foolish.

Если мы напишем так, то будет заменено только первое совпадение.

Чтобы сделать все замены, вам нужно использовать регулярные выражения.

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replace(/Stay/g, 'Always')
console.log(newStr) // Always Hungry. Always Foolish.

Однако при использовании обычного, если требуется соответствие+Равные символы должны быть экранированы. Такие как:

/\+/g

Если вы сообразительны, вы можете придумать другое решение: использоватьsplit + joinПуть

Вот официальный пример:

const queryString = 'q=query+string+parameters';
const withSpaces = queryString.split('+').join(' ');
// q=query string parameters

Но это также снижает производительность, плюс эта операция очень распространена. Так он родилсяString.prototype.replaceAllЭтот API, мы можем работать более удобно.

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replaceAll('Stay', 'Always')
console.log(newStr) // Always Hungry. Always Foolish.

String.prototype.replaceAll(searchValue, replaceValue)

Примечание: когдаsearchValueявляется неглобальным регулярным выражением,replaceAllвызовет исключение. еслиsearchValueглобальное регулярное выражение,replaceAllа такжеreplaceПоведение последовательное.

2.Promise.any

GitHub.com/Job39/предложения…

const p = Promise.all([p1, p2, p3]);

• Promise.all(ES2015) p выполняется только тогда, когда состояние каждого входящего экземпляра Promise (p1, p2, p3) становится выполненным, и пока один из (p1, p2, p3) отклонен, состояние p становится отклоненным.
• Promise.race(ES2015) Когда один из входящих экземпляров Promise (p1, p2, p3) сначала изменяет состояние, тогда соответственно изменяется состояние p, то есть возвращается возвращаемое значение первого измененного экземпляра Promise.
• Promise.allSettled(ES2020) Экземпляр упаковки не завершится, пока все входящие экземпляры Promise (p1, p2, p3) не вернут результаты, независимо от того, выполнены они или отклонены.
• Promise.any(ES2021) Когда любое из обещаний выполнено, вернуть обещание, которое уже имеет выполненное значение. Если все обещания отклонены, вернуть отклоненное обещание.

Контрастная память

• мы можем поставитьPromise.any()понимается какPromise.all()обратная операция.

Приветствую Бога Вэй!

• Promise.any()а такжеPromise.race()Методы очень похожи, с одним отличием: первый неPromiseсталиrejectedстатус заканчивается.

Для получения дополнительной информации см. Введение г-на Руана в ECMAScript 6.

Promise.any(promises).then(
    (first) => {
        // 任何一个Promise完成
    },
    (error) => {
        // 所有的 Promise都拒绝了
    }
)

происхождение любого имени

any Как следует из названия, он не только четко описывает свою функцию, но и так называется в сторонних библиотеках, предоставляющих эту функцию.Студенты, которые его использовали, должны чувствовать себя очень дружелюбно.

• GitHub.com/Kris KO WA out/Пожалуйста…
• Bluebird находится по адресу .com/docs/API/cheat…
• GitHub.com/no 0 подняться/про…
• GitHub.com/ предназначен для продвижения о / я ...
• Github.com/sin of red или fox ...

предсказуемый эффект

Чиновник приводит пример, который можно применитьPromise.any()Проверьте, какой сайт является самым быстрым для доступа.

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // Any of the promises was fulfilled.
  console.log(first);
  // → 'home'
}).catch((error) => {
  // All of the promises were rejected.
  console.log(error);
});

3.WeakRefs

GitHub.com/Job39/предложения…

Примечание: старайтесь избегать использованияWeakRefа такжеFinalizationRegistry, механизм сборки мусора зависит от реализации движка JavaScript, которая может быть разной для разных движков или разных версий движка.

Это предложение в основном включает две основные новые функции:

• использоватьWeakRefСлабые ссылки на объекты, созданные классом
• использоватьFinalizationRegistryКласс запускает определяемый пользователем финализатор после того, как объект будет удален сборщиком мусора.

Их можно использовать по отдельности или вместе.

WeakRefЭкземпляры не блокируют коллекции GC, но GCEventLoopпереработка междуWeakRefпример.GCпосле переработкиWeakRefпримерderef()метод вернет undefined.

let ref = new WeakRef(obj)
let isLive = ref.deref() // 如果 obj 被垃圾回收了，那么 isLive 就是 undefined

FinalizationRegistryрегистрCallback, вызываемый после того, как сборщик мусора восстанавливает объект.

const registry = new FinalizationRegistry(heldValue => {
  // ....
});

// 通过 register 注册任何你想要清理回调的对象，传入该对象和所含的值
registry.register(theObject, "some value");

Для более подробной информации вы можете прочитать:

• GitHub.com/Job39/предложения…

4. Логические операторы присваивания

GitHub.com/Job39/предложения…

Давайте рассмотримES2020Новый оператор объединения null??

Когда левый операндundefinedилиnull, оператор присваивает правый операнд левой переменной.

const name = null ?? '前端食堂'
console.log(name) // 前端食堂

С помощью логического оператора присваивания мы можем заменить старый способ записи:

const demo = function() {
    // 旧的写法1
    // if (!a) {
    //     a = '西瓜'
    // }
    // 旧的写法2
    // a = a || '西瓜'

    // 新的写法
    a ||= '西瓜' 
}

a ||= b; // 等同于 a || (a = b);

a &&= b; // 等同于 a && (a = b);

a ??= b; // 等同于 a ?? (a = b);

5.Числовые разделители

GitHub.com/Job39/предложения…

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

const x = 1000000000000
const y = 1_000_000_000_000
console.log(x === y) // true

Доступен в двоичном, шестнадцатеричном, BigInt и т. д.

❤️Любовное тройное комбо

1. Если вы считаете, что еда и напитки в столовой все еще аппетитны, просто поставьте лайк и поддержите это, вашеотличныймоя самая большая мотивация.

2. Подпишитесь на официальный аккаунтФронтальная столовая,Ешьте каждый прием пищи!

3. Нравится, комментирует, пересылает === призывает больше!