Переводчик пресса:В этой статье систематизированы все новые функции и объяснены их на простых примерах.
- оригинал:Here are examples of everything new in ECMAScript 2016, 2017, and 2018
- Переводчик:Fundebug
Для обеспечения удобочитаемости в этой статье используется вольный перевод, а не дословный перевод. Кроме того, авторские права на эту статью принадлежат оригинальному автору, а перевод предназначен только для ознакомления.
Трудно следить за новыми функциями в JavaScript, особенно если вы не нашли несколько полезных примеров для понимания.
Эта статья будет сопровождаться полезными примерами для иллюстрацииTC3918 функций в ES2016, ES2017 и ES2018 соответственно. Учитывая объем этой статьи, мы разобьем ее на две части, это первая часть.
1. Array.prototype.includes
includesполезная функция в Array, позволяющая быстро узнать, содержит ли массив элемент. (включая NaN, так что это не то же самое, что indexOf).
2. Инфиксная форма экспоненциальной функции
Обычно мы используем его инфиксную форму для сложения/вычитания, которая интуитивно понятна и проста для понимания. В ECMAScript2016 мы можем использовать**заменить Math.pow.
1. Object.values()
Функция Object.values() очень похожа на Object.keys() тем, что возвращает все значения собственных свойств в объекте (не считая наследования по цепочке прототипов).
2. Object.entries()
Object.entries() связана с Object.keys, но функция entry() возвращает и ключ, и значение в виде массива. Таким образом, очень удобно использовать цикл или преобразовывать объект в карту.
Пример 1:
Пример 2:
3. Добавление строки
Предоставляет два метода добавления строки, String.prototype.padStart и String.prototype.padEnd, чтобы мы могли добавлять новую строку в начало и конец строки.
'someString'.padStart(numberOfCharcters [,stringForPadding]);
'5'.padStart(10) // ' 5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5 '
'5'.padEnd(10, '=*') //'5=*=*=*=*='
Это полезно для форматирования вывода!
3.1 Пример стартовой площадки
У нас есть массив элементов разной длины, мы можем добавить 0, чтобы все они печатались длиной 10.
3.2 пример padEnd
Снова отформатируйте вывод, добавив после него строку.
const cars = {
'🚙BMW': '10',
'🚘Tesla': '5',
'🚖Lamborghini': '0'
}
Object.entries(cars).map(([name, count]) => {
//padEnd appends ' -' until the name becomes 20 characters
//padStart prepends '0' until the count becomes 3 characters.
console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`)
});
//Prints..
// 🚙BMW - - - - - - - Count: 010
// 🚘Tesla - - - - - - Count: 005
// 🚖Lamborghini - - - Count: 000
3.3 Использование padStart и padEnd для форматирования эмодзи и других широких символов
Смайлики и расширенные символы представлены с использованием нескольких байтов, поэтому использование padStart и padEnd может работать не так, как вы ожидаете.
Например: мы добавляем ❤️ кheartПередний:
//你会发现不仅没有5个桃心，有一个桃心还很奇怪。
'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'
Это связано с тем, что ❤️ занимает 2 байта ('\u2764\uFE0F'), а само сердце имеет 5 байтов, так что остается место только для 5 байтов. Так что просто добавил 2 с половиной сердца. Последнее добавленное «\u2764» будет отображаться в виде маленькой пиковой червы.
4. Object.getOwnPropertyDescriptors
Эта функция возвращает все свойства объекта, даже функции получения/установки. Основной причиной добавления этой функции в ES2017 является облегчение глубокого копирования одного объекта в другой и одновременное копирование геттера/сеттера. В отличие от Object.assign.
Object.assign делает глубокую копию объекта, кроме геттеров/сеттеров.
Скопируйте исходный объект Car в ElectricCar, и вы обнаружите, что Object.getOwnPropertyDescriptors копирует геттеры и сеттеры, а Object.assign — нет.
5. Разрешить добавление запятых в конце параметров функции.
Это небольшое изменение призвано облегчить алгоритму git разделение обязанностей по коду. Давайте использовать подробный пример, чтобы понять:
Стоит отметить, что при вызове функции вы также можете добавить запятую в конце.
6. Async/Await
Это, безусловно, самая полезная из функций, которые я рассмотрел. Асинхронные функции могут помочь нам избавиться от «ада обратных вызовов», и весь код станет более кратким.
asyncКлючевое слово указывает компилятору JavaScript по-разному обрабатывать указанную функцию. Когда компилятор встречаетawaitфункция будет приостановлена. это будет ждать, покаawaitОбещание, возвращаемое калиброванной функцией. Обещание либо получает результат, либо отвергается.
В приведенном ниже примереgetAmountвызов функцииgetUserа такжеgetBankBalanceДве асинхронные функции. Мы могли бы сделать это с помощью промисов, но асинхронное ожидание более лаконично.
6.1 асинхронная функция возвращает Promise
Если вы хотите получить результат асинхронной функции, вам нужно использовать синтаксис then для Promise.
В следующем примере мы хотим использовать console.log для вывода результата doubleAndAdd, мы можем использовать синтаксис then и передать функцию console.log в качестве параметра.
6.2 Параллельная обработка
В приведенном выше примере мы явно вызвали await дважды, потому что каждое из них ждало 1 секунду, то есть всего две секунды. Теперь мы можем использовать функцию Promise.all, чтобы заставить их работать параллельно.
6.3 Обработка ошибок async/await
Существует множество способов обработки ошибок.
- Способ 1: использовать try-catch в функции
- Способ 2: поймать каждое выражение ожидания
Поскольку каждое выражение ожидания возвращает обещание, вы можете его перехватить.
- Способ 3: поймать всю функцию асинхронного ожидания
О Фундебаге
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了7亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。 Бесплатная пробная версия приветствуется!
Уведомление об авторских правах
Пожалуйста, указывайте автора при перепечаткеFundebugИ адрес этой статьи:
bug.com/2018/07/17/…