«Эта статья участвовала в деятельности Ордена Созыва Хаовэн,Нажмите, чтобы просмотреть: двойные заявки на вход и сервер, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"
Здесь мы собрали материалы для подготовки к интервью за определенный период времени, чтобы облегчить лучшее понимание, и разобрали некоторые общие новинки от ES7 до ES9, которыми делимся здесь для закрепления памяти.
Что нового в ES7
include() — определяет, содержит ли массив определенное значение
Если вам нужно определить, содержит ли массив конкретное значение, в прошлом было бы более вероятно использоватьindexOfЕсли есть, он вернет нижний индекс искомого значения, если нет, он вернет -1, что более удобно в сценарии определения того, существует ли значение и необходимо получить нижний индекс значения.
const arr = [1, 2, 3]
arr.indexOf(2) // 1
а такжеincludesЗатем логическое значение возвращается напрямую, нижний индекс значения не возвращается, и он более чисто используется для оценки того, содержит ли массив значение или нет.
const arr = [1, 2, 3]
arr.includes(2) // true
arr.includes(4) // false
**- Экспоненциальный оператор
Если необходимо выполнить расчет индекса, как это нужно было реализовать в прошлом?
Например, чтобы вывести 2 в 10-й степени, помимо пользовательских рекурсивных методов для реализации, вы можете использоватьMath.powреализация функции.
Math.pow(2, 10) // 1024
В ES7 появились новые операторы возведения в степень**, что упрощает выполнение экспоненциальных операций.
2**10 // 1024
Новые функции ES8
async/await — ключевое слово для асинхронной операции
Для решения проблемы ада обратных вызовов Promise — хорошее решение, но в сценарии работы со сложными процессами в Promise отсутствует определенная семантика, и каждый процесс связан .then, что делает код более отвратительным для чтения.
Представьте себе практический сценарий: операция входа пользователя после того, как пользователь запрашивает интерфейс входа и проходит проверку, затем запрашивает интерфейс информации о пользователе для получения информации о пользователе.Промис реализован следующим образом:
userLogin(data)
.then(res=>{
return getUserInfo(res.token)
})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.error(err)
})
Если процесс более сложный, до последнего улова будет больше подключений, что увеличивает стоимость чтения для обслуживания кода и не может хорошо выразить процесс выполнения.
Таким образом, существует async/await, который может быть реализован в синхронном коде, а также асинхронно обрабатываемые ключевые слова, а также поддерживает исключения try catch для перехвата. Эти два метода нельзя разделить и использовать по отдельности. За await должен следовать объект Promise. В противном случае он будет автоматически упакован в объект Promise.
Реализация с использованием async/await выглядит следующим образом:
try {
let loginRes = await userLogin(data)
let res = await getUserInfo(loginRes.token)
console.log(res)
} catch (err) {
console.error(err)
}
values()/entries() - новый способ обхода объектов
ES7 добавляет два новых метода обхода объекта,Object.values()а такжеObject.entries().Object.values()Возвращает массив, содержащий все проходимые значения свойств самого объекта, пример:
const user = {name: "Sam", age: "25"}
Object.values(user) // ["Sam", "25"]
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj) // ["b", "c", "a"]
Следует отметить, что если имя атрибута является числовым атрибутом, он просматривается в соответствии с числовым значением, от меньшего к большему, поэтому возвращается порядок b, c, a.
Object.entries()Также возвращает массив, содержащий группы ключей и свойств для всех сопоставимых случаев самого объекта, например:
const user = {name: "Sam", age: "25"}
Object.entries(user) // [["name", "Sam"], ["age", "25"]]
const obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(obj) // [["2", "b"], ["7", "c"], ["100", "a"]]
Заполнение строк - Заполнение строк
В ES8 к String добавлены две новые функции экземпляра:padStartа такжеpadEnd, что означает добавление символов в начало или конец исходной строки.padStartа такжеpadEndОба могут принимать два параметра:
- targetLength: целевая длина, до которой необходимо дополнить текущую строку. Если это значение меньше длины текущей строки, возвращается сама текущая строка.
- padString: (необязательно) строка заполнения. Если строка слишком длинная и длина дополненной строки превышает целевую длину, будет сохранена только самая левая часть, а остальные части будут усечены.Значение этого параметра по умолчанию — " ".
Пример:
let str = 'Sam'
str.padStart(6,'its')// 'itsSam'
str.padEnd(6,'its')// 'Samits'
getOwnPropertyDescriptors — возвращает собственные описания свойств элемента.
Если вы хотите получить описание собственных атрибутов элемента, вы можете использоватьObject.getOwnPropertyDescriptors()Если свойств нет, будет возвращен пустой объект.
Используйте его для решенияObject.assign()Проблема не копирования получить и установить правильно.
Пример:
const obj = {name: "Sam"}
Object.getOwnPropertyDescriptors(obj)
// name:
// configurable: true
// enumerable: true
// value: "Sam"
// writable: true
// __proto__: Object
// __proto__: Object
Что нового в ES9
for await of - асинхронный итератор
если вasync/awaitЕсли вы используете цикл для вызова асинхронной функции, она не будет выполняться нормально, например:
async function demo(arr) {
for (let i of arr) {
await handleDo(i);
}
}
В этом примере сам цикл остается синхронным, и все вызовы завершаются до внутренней асинхронной функции.
Для решения этой проблемы в ES9 были введены асинхронные итераторы, позволяющие вызывать асинхронные функции в циклах, например:
async function demo(arr) {
for await (let i of arr) {
handleDo(i);
}
}
Promise.finally() - Триггер завершения обещания
Когда мы вызываем Promise, следующим результатом будет либо.then(), или срабатывает сбой.catch(). В результате часть кода приходится писать дважды в этих двух местах, что приводит к избыточности кода..finally(), что позволяет вам стрелять после завершения выполнения.
Пример:
function login() {
userLogin()
.then(res=>{
console.log(res);
})
.catch(err => {
console.log(err);
})
.finally(() => {
console.log('finally');
});
}
Свойства отдыха/спреда
Синтаксис остальных параметров позволяет нам представлять неопределенное количество параметров в виде массива. Пример:
restParam(1, 2, 3, 4, 5);
function restParam(p1, p2, ...p3) {
// p1 = 1
// p2 = 2
// p3 = [3, 4, 5]
}
ES9 предоставляет те же параметры Rest и операторы распространения, что и массивы для деструктуризации объекта.Пример:
const Obj = {a: 1, b: 2, c: 3};
const { a, ...x } = Obj;// a = 1,x = { b: 2, c: 3 }
Что нового в регулярных выражениях
флаг s (dotAll)
s(dotAll)flag В регулярных выражениях точка (.) — это специальный символ, представляющий любой отдельный символ, за двумя исключениями. Один из них представляет собой четырехбайтовый символ UTF-16, который можно разрешить с помощью модификатора u; другой — признак конца строки, такой как перевод строки (n) или возврат каретки (r), который можно разрешить с помощью s( dotAll), добавление s к исходному регулярному выражению означает:
console.log(/foo.bar/.test('foo\nbar')) // false
console.log(/foo.bar/s.test('foo\nbar')) // true
Как определить, использует ли текущее регулярное выражение режим dotAll?
const re = /foo.bar/s // Or, `const re = new RegExp('foo.bar', 's');`.
console.log(re.test('foo\nbar')) // true
console.log(re.dotAll) // true
console.log(re.flags) // 's'
именованная группа захвата
В некоторых шаблонах регулярных выражений сопоставление с использованием чисел может привести к путанице. Поскольку обозначение даты в американском английском отличается от обозначения даты в британском английском, может быть трудно различить, какая группа представляет день, а какая группа представляет месяц:
const re = /(\d{4})-(\d{2})-(\d{2})/;
const match= re.exec('2019-01-01');
console.log(match[0]); // → 2019-01-01
console.log(match[1]); // → 2019
console.log(match[2]); // → 01
console.log(match[3]); // → 01
В ES9 представлены именованные группы захвата, которые позволяют присваивать имя каждому совпадению группы, которое легче читать и на него легче ссылаться. Пример:
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2019-01-01');
console.log(match.groups); // → {year: "2019", month: "01", day: "01"}
console.log(match.groups.year); // → 2019
console.log(match.groups.month); // → 01
console.log(match.groups.day); // → 01
напиши в конце
Писать не легко, надеюсь получить от вас "лайк". Если статья вам полезна, вы можете выбрать «Избранное». Если в статье есть ошибки или предложения, прошу прокомментировать и исправить, спасибо. ❤️
Добро пожаловать в другие статьи
- Реальный бой: реализовать компонент сообщения Message с помощью Vue3
- Фактический бой: реализовать компонент изображения с помощью Vue3 и, кстати, поддерживать ленивую загрузку.
- One Piece, что нового в Vue.js 3.0
- После начала работы я понял, что синтаксис настройки скрипта Vue3 действительно классный.
- Общие проблемы и решения для технических команд
- Объяснение 10 новых функций, обычно используемых в ES6