ES9
предисловие
В этой статье в основном представлены некоторые новые функции ES9.
1. Асинхронная итерация
существуетasync/awaitВ какой-то момент вы можете попытаться вызвать асинхронную функцию в синхронном цикле. Например:
async function process(array) {
for (let i of array) {
await doSomething(i);
}
}
Этот код не будет работать, как и следующий:
async function process(array) {
array.forEach(async i => {
await doSomething(i);
});
}
В этом коде сам цикл остается синхронным и завершается до всех вызовов внутренней асинхронной функции.
ES2018 представляет асинхронные итераторы, которые аналогичны обычным итераторам, за исключениемnext()Метод возвращает обещание. следовательноawaitможет иfor...ofЦиклы используются вместе для последовательного выполнения асинхронных операций. Например:
async function process(array) {
for await (let i of array) {
doSomething(i);
}
}
2. Promise.finally()
В ES6PromiseЦепочка либо успешно доходит до последнейthen()или не срабатываетcatch(). На практике нам может понадобитьсяPromiseОдин и тот же код запускается независимо от успеха или неудачи. Например, очистка, удаление сеансов, закрытие соединений с базой данных и т. д.
В ES9 разрешено использоватьfinally()указать окончательную логику.
следующим образом:
let count = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(100)
}, 1000);
})
}
let list = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3])
}, 1000);
})
}
let getList = async () => {
let c = await count()
console.log('async')
let l = await list()
return { count: c, list: l }
}
console.time('start');
getList().then(res => {
console.log(res)
})
.catch(err => {
console.timeEnd('start')
console.log(err)
})
.finally(() => {
console.log('finally')
})
//执行结果
async
{count: 100, list: [1, 2, 3]}
finally
3. Свойства отдыха/спреда
3.1 В ES6(...)
Три точки были введены в ES6..., основная функция состоит в том, чтобыRest参数和扩展运算符:
Объекты действия используются только для массивов
1. неизвестное количество параметров представляет собой массив:
restParam(1, 2, 3, 4, 5);
function restParam(p1, p2, ...p3) {
// p1 = 1
// p2 = 2
// p3 = [3, 4, 5]
}
2. Оператор спреда:
const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100
3.2 В ES9(...)
Остальные параметры и операторы распространения предоставляются для объектов в ES9, таких как массивы.
Использование остальных параметров
var obj = {
a: 1,
b: 2,
c: 3
}
const { a, ...param } = obj;
console.log(a) //1
console.log(param) //{b: 2, c: 3}
Распространение использования для сбора всех оставшихся параметров:
var obj = {
a: 1,
b: 2,
c: 3
}
function foo({a, ...param}) {
console.log(a);
console.log(param)
}
Как и массивы, параметры Rest можно использовать только в конце объявления. Кроме того, он работает только на верхнем уровне каждого объекта, а не в том случае, если объекты вложены в объекты.
Оператор распространения может использоваться внутри других объектов
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, z: 26 };
// obj2 is { a: 1, b: 2, c: 3, z: 26 }
3.3 Сценарии использования Spread
1. Поверхностное копирование
Вы можете использовать (...) для копирования объекта, но эта копия может копировать только перечисляемые собственные свойства объекта.
var obj = {
name: 'LinDaiDai',
looks: 'handsome',
foo() {
console.log('old');
},
set setLooks(newVal) {
this.looks = newVal
},
get getName() {
console.log(this.name)
}
}
var cloneObj = {...obj};
cloneObj.foo = function() {
console.log('new')
};
console.log(obj)
// { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), get getName:f getName(), set setLooks: f setLooks(newVal)}
console.log(cloneObj)
// { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), getName: undefined, setLooks: undefined }
obj.foo()
// old
cloneObj.foo()
// new
Как показано выше, объект определенobjи использовать(...)Скопируйте объект и измените функции в объектеfoo()Не затрагивая исходный объект, но исходный объектsetterа такжеgetterНо его нельзя скопировать.
2. Объединить два объекта
const merged = {...obj1, ...obj2};
//同：
const merged = Object.assign({}, obj1, obj2);
4. Регулярные выражения с именами групп захвата
4.1 Основное использование
Javascriptиспользуется в регулярных выраженияхexec()match может возвращать объект, подобный массиву, содержащий совпадающую строку.
Например, соответствующий формат даты в следующем случае:
//正则表达式命名捕获组
const reDate = /(\d{4})-(\d{2})-(\d{2})/,
match = reDate.exec('2018-08-06');
console.log(match);
// [2018-08-06, 2018, 08, 06]
// 这样就可以直接用索引来获取年月日：
match[1] // 2018
match[2] // 08
match[3] // 06
Возвращает массив, где элемент 0 — это текст, соответствующий регулярному выражению, первый элемент — это текст, соответствующий первому подвыражению RegExpObject (если есть), а второй элемент — это текст, соответствующий RegExpObject Текст (если есть) ) соответствует второму подвыражению и так далее.
В приведенном выше случае, если вы измените структуру регулярного выражения, можно изменить индекс соответствующего объекта.
Измените следующим образом:
//正则表达式命名捕获组
const reDate = /(\d{2})-(\d{2})-(\d{4})/,
match = reDate.exec('2018-08-06');
console.log(match);
// [2018-08-06, 08, 06, 2018]
// 但此时年月日的索引就改变了
match[3] // 2018
match[1] // 08
match[2] // 06
Вы можете видеть недостатки описанного выше способа записи, поэтому в ES9 именованные группы захвата могут использовать символы.?<name>,следующим образом:
const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
match = reDate.exec('2018-08-06')
console.log(match);
// [2018-08-06, 08, 06, 2018, groups: {day: 06, month: 08, year: 2018}]
//此时可以使用groups对象来获取年月日
match.groups.year // 2018
match.groups.month // 08
match.groups.day // 06
Способ записи именованной группы захвата эквивалентен определению имени для каждой соответствующей группы захвата и сохранению его в возвращаемом значении.groupsИмущество.
4.2 Объединениеreplace()
Именованные захваты также могут использоваться вreplace()метод. Например, чтобы преобразовать дату в формат США ММ-ДД-ГГГГ:
const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
d = '2018-08-06'
USADate = d.replace(reDate, '$<month>-$<day>-$<year>');
console.log(USADate);
// 08-06-2018
Вы также можете поменять местами имена и фамилии китайских имен:
const reName = /(?<sur>[a-zA-Z]+)-(?<name>[a-zA-Z]+)/;
Chinese = 'Lin-DaiDai',
USA = Chinese.replace(reName, '$<name>-$<sur>');
console.log(USA);
// DaiDai-Lin
5. Обратное утверждение регулярного выражения
5.1 Основное использование
Давайте сначала посмотрим, что такое утверждение с опережением в регулярном выражении:
Например, получение символа валюты
const noReLookahead = /\D(\d+)/,
reLookahead = /\D(?=\d+)/,
match1 = noReLookahead.exec('$123.45'),
match2 = reLookahead.exec('$123.45');
console.log(match1[0]); // $123
console.log(match2[0]); // $
Вы можете увидеть это, если добавите его в регулярное выражение?=, совпадение происходит, но захвата не происходит, и утверждение не включается во все поле совпадения.
Обратные утверждения разрешены в ES9:
const reLookahead = /(?<=\D)[\d\.]+/;
match = reLookahead.exec('$123.45');
console.log(match[0]); // 123.45
использовать?<=Сделайте обратное утверждение, вы можете использовать обратное утверждение, чтобы получить цену валюты, игнорируя символ валюты.
5.2 Положительное обратное утверждение
Приведенный выше случай является положительным обратным утверждением, т. е.\DЭто условие должно существовать, если:
const reLookahead = /(?<=\D)[\d\.]+/;
match1 = reLookahead.exec('123.45'),
match2 = reLookahead.exec('12345');
console.log(match1[0]); // 45
console.log(match2); // null
можно увидетьmatch1Спички45, это связано с123нет предыдущего совпадения\Dсовпадения, он всегда найдет совпадения\Dсодержание, то есть.Затем верните следующий контент.
Если условие предыдущего утвердительного обратного утверждения не выполняется, то вернутьnull.
6. Регулярные выраженияdotAllмодель
средняя точка регулярного выражения.Сопоставьте любой одиночный символ вне автомобиля, отметьтеsИзмените это поведение, чтобы разрешить разделители строк:
/hello.world/.test('hello\nworld'); // false
/hello.world/s.test('hello\nworld'); // true
console.log(/hello.world/s.test(`hello
world`)) // true
7. Регулярные выражения Unicode Escape
До сих пор собственный доступ к свойствам символов Unicode в регулярных выражениях не разрешался. ES2018 добавил экранирование свойств Unicode - формы\p{...}а также\P{...}, используя токен в регулярном выраженииu(Юникод), в\pВнутри блока вы можете установить атрибуты, которые должны сопоставляться, вместо определенного контента в виде пар ключ-значение.
const reGreekSymbol = /\p{Script=Greek}/u;
console.log(reGreekSymbol.test('π')); // true
GreekОзначает по-гречески.
8. Строки-шаблоны без управляющих последовательностей
Наконец, ES2018 снимает ограничение синтаксиса для escape-последовательностей ECMAScript в теговых строках шаблона.
До,\uзапускает экранирование юникода,\xначинает шестигранный побег,\за которым следует цифра, чтобы начать восьмеричное escape-последовательность. Это делает невозможным создание определенных строк, таких как пути к файлам Windows.C:\uuu\xxx\111. Более подробная информациястрока шаблона.
послесловие
Интеллектуальная собственность бесценна и поддерживает оригинальность.
Справочная статья:
[Перевод] Что нового в ES2018 (ES9)
Что нового в ES2018: функции Rest/Spread
ES6/ES7/ES8/ES9 Видно, что javascript нас не разочаровал.Обновления последних лет не упали, и постоянное обучение может гарантировать, что это общество устранит нас...