Спецификация JavaScript ES2017 (ES8) существует уже давно. Многие из функций, представленных в этой спецификации, очень полезны. Большинство из них также хорошо поддерживаются и безопасны в использовании. В этом руководстве вы узнаете немного о функциях ES2017, о том, как они работают и как их использовать.
Содержание статьи
Заполнение строки с помощью padStart () и padEnd ()
Две небольшие функции ES2017, добавленные к строкам, — это padStart () и padEnd () . Эти два метода позволяют легко добавлять символы в строку, чтобы она достигла определенной длины. padStart () добавляет символы в начало строки. padEnd () добавляет символы в конец.
Оба метода принимают два параметра. Первый параметр — это длина строки, которой вы хотите достичь. Второй параметр — это символ, который вы хотите добавить. Этот символ будет добавляться повторно до тех пор, пока не будет достигнута заданная длина. Если строка уже имеет заданную длину или превышает ее, ничего не произойдет.
Этот второй параметр, добавляемый символ, является необязательным. Если вы укажете его, оба метода добавят его при необходимости. Если вы его опустите, оба метода добавят символ по умолчанию
// пример padStart ():
// Добавить символ '-' в начало
// пока строка не достигнет длины 9 символов.
'Hello'.padStart (9,' - ')
// Выход:
// '----Привет'
// Добавить символ 'A' в начало
// пока строка не достигнет длины 3 символа.
// Примечание: строка уже превышает эту длину
// значит ничего не произойдет.
'Привет'. PadStart (3, 'A')
// Выход:
// 'Привет'
// Увеличиваем длину строки до 11,
// но не указывайте добавляемый символ.
'Привет'. PadStart (15)
// Выход:
// ' Привет'
// пример padEnd ():
// Добавить символ '-' в начало
// пока строка не достигнет длины 9 символов.
'Пока'. PadEnd (9, '.')
// Выход:
// 'До свидания......'
// Добавить символ 'A' в начало
// пока строка не достигнет длины 3 символа.
// Примечание: строка уже превышает эту длину
// значит ничего не произойдет.
'Пока'.padEnd (1,'? ')
// Выход:
// 'До свидания'
// Увеличиваем длину строки до 11,
// но не указывайте добавляемый символ.
'Bye'.padEnd (11)
// Выход:
// 'До свидания '
Object.values ()
Еще одно приятное и полезное дополнение к языку JavaScript — метод Object.values () . Этот метод возвращает значения из всех собственных свойств объекта. Он возвращает эти значения в виде массива. Этот метод принимает один параметр. Этот параметр — объект, значения которого вы хотите получить.
Интересно то, что этот метод также работает с массивами. Это означает, что вы можете передать массив в качестве аргумента вместо объекта. В результате вы получите новый массив значений, элементы из исходного массива.
// Object.values () с объектами:
// Создаем объект:
const joshuaObj = {имя: 'Джошуа', хобби: 'программирование'}
// Получаем все значения из "joshuaObj":
console.log (Object.values (joshuaObj))
// Выход:
// [ 'Joshua', 'programming' ]
// Object.values () с массивами:
// Создаем массив:
const languagesArr = ['C', 'C++', 'Rust', 'Python', 'JavaScript']
// Получаем все значения из "languagesArr":
console.log (Object.values (languagesArr))
// Выход:
// [ 'C', 'C++', 'Rust', 'Python', 'JavaScript' ]
Object.entries ()
Еще одним дополнением к объектам является метод entry () . Предыдущий метод Object.entries () возвращал только значения собственных свойств. Этот метод возвращает как значения собственных свойств, так и эти собственные свойства. Вы получите эти данные, эти свойства и значения в виде вложенных многомерных массивов.
Вы получите по одному массиву для каждого собственного свойства. Каждый из этих массивов будет содержать по два элемента. Первый — это собственность. Второй — это стоимость. Способ использования этого метода такой же, как и для метода Object.entries () . Вы передаете объект, записи которого хотите получить, в качестве аргумента.
Подобно методу Object.values () Object.entries () также работает с массивами. Если вы передадите массив, вы также получите многомерный массив. Для каждого элемента в массиве будет один вложенный массив. Каждый из этих массивов будет содержать два элемента, индекс элемента и сам элемент.
// Object.entries () с объектами:
// Создаем объект:
const jackObj = {имя: 'Джек', возраст: 44}
// Получаем все записи из "jackObj":
console.log (Object.entries (jackObj))
// Выход:
// [ [ 'name', 'Jack' ][ 'age', 44 ]]
// Object.entries () с массивами:
// Создаем массив:
const hobbiesArr = ['Reading', 'Writing', 'Sport', 'Programming']
// Получить все записи из "hobbiesArr":
console.log (Object.entries (hobbiesArr))
// Выход:
// [
// [ '0', 'Reading' ],
// [ '1', 'Writing' ],
// [ '2', 'Sport' ],
// [ '3', 'Programming' ]
//]
Object.getOwnPropertyDescriptors ()
В JavaScript объекты имеют ряд свойств. У всех этих свойств есть свои дескрипторы. Эти дескрипторы являются атрибутами этих свойств. Эти атрибуты включают «значение»: значение, связанное со свойством, и «записываемое»: указывает, может ли свойство быть доступно для чтения / записи или только для чтения.
Третий атрибут является «настраиваемым»: указывает, можете ли вы изменить дескриптор и удалить свойство. Четвертый — «перечислимый»: указывает, будет ли свойство отображаться, когда вы перечисляете (перебираете) объект. Последние два — «get» и «set»: функция получения и установки свойства.
Одной из функций ES2017 является метод Object.getOwnPropertyDescriptors () . Этот метод призван помочь вам в работе с этими дескрипторами. Это происходит двумя способами. Во-первых, это помогает вам получить все собственные свойства объекта вместе со всеми существующими дескрипторами этих свойств.
Во-вторых, он также помогает копировать эти дескрипторы. Это будет очень полезно, когда вы захотите клонировать объекты. Когда вы пытаетесь скопировать объект, например, с помощью Object.assign (), вы столкнетесь с одной проблемой. Он не будет правильно копировать свойства с атрибутами, отличными от атрибутов по умолчанию. При этом также будут пропущены функции установки геттера.
Этой проблемы можно избежать, используя метод Object.getOwnPropertyDescriptors () вместе с Object.create () и Object.getPrototypeOf (). Эта комбинация позволит вам создать неглубокую копию объекта, который также содержит дескрипторы со значениями, отличными от значений по умолчанию.
// Создаем объект:
const pet1 = {}
// Добавить свойство "разновидности", доступное только для чтения
// и имеет настраиваемую функцию получения:
Object.defineProperty (pet1, 'разновидности', {
настраиваемый: ложь,
перечислимый: истина,
записываемый: false,
get: function () {
return "Это птица!"
}
})
// Регистрируем объект "pet1":
console.log (pet1)
// Выход:
// {разновидности: 'птица'}
// Регистрируем значение свойства "разновидности":
// Примечание: это вызовет метод получения для этого свойства.
console.log (pet1.species)
// Выход:
// "Это птица!"
// Получаем все свойства и их дескрипторы:
Object.getOwnPropertyDescriptors (pet1)
// Выход:
// {
// разновидность: {
// получить: ƒ get (),
// установить: undefined,
// перечислимый: true,
// настраиваемый: false
//}
//}
// Пытаемся клонировать объект "pet1":
const pet2 = Object.assign ({}, pet1)
// Регистрируем значение свойства "разновидности" для "pet2":
// Примечание: это покажет фактическое значение.
// Это не вызовет функцию получения
// потому что в "pet2" нет функции получения.
console.log (pet2.species)
// Выход:
// "Это птица!"
// Получаем все свойства "pet2" и их дескрипторы:
Object.getOwnPropertyDescriptors (pet2)
// Выход:
// {
// разновидность: {
// value: «Это птица!», // Этого здесь быть не должно.
// Writable: true, // Предполагается, что это ложь.
// перечислимый: true,
// configurable: true // Предполагается, что это ложь.
// // Предполагается, что будет пользовательская функция получения.
//}
//}
// Снова пытаемся клонировать объект "pet1"
// используя getOwnPropertyDescriptors (), create ()
// и прототип pet1:
const pet3 = Object.create (
Object.getPrototypeOf (pet1),
Object.getOwnPropertyDescriptors (pet1)
)
// Регистрируем значение свойства "разновидности":
// Примечание: это вызовет метод получения для этого свойства.
console.log (pet3.species)
// "Это птица!"
// Получаем все свойства и их дескрипторы:
Object.getOwnPropertyDescriptors (pet1)
// Выход:
// {
// разновидность: {
// get: ƒ get (), // Вот пользовательский получатель.
// установить: undefined,
// перечислимый: true,
// configurable: false // Это ложь, как и должно быть.
// // Нет правильного "значения".
//}
//}
Асинхронные функции
Асинхронные функции — одна из самых популярных функций ES2017. Это неудивительно, поскольку они делают написание асинхронного JavaScript даже проще, чем обещания. Тем не менее, асинхронные функции действительно не так уж далеки от обещаний. Интересный факт. Фактически асинхронные функции построены на обещаниях.
Когда вы используете асинхронные функции, JavaScript все еще использует обещания. Имея это в виду, какой смысл использовать асинхронные функции, а не обещания? Основная причина использования асинхронных функций — более простой и понятный синтаксис. Обещания облегчили побег из ада обратных вызовов.
Однако асинхронные функции пошли еще дальше. Я уже написал обширное руководство как по асинхронным функциям, так и по асинхронному JavaScript. Итак, чтобы узнать больше об асинхронных функциях и асинхронном JavaScript, взгляните на эти два руководства. Они охватывают все, что вам нужно знать.
Теперь общая картина. На самом деле асинхронные функции состоят из двух функций. Первое — это ключевое слово async . Когда вы помещаете это ключевое слово в начало объявления функции, вы создаете асинхронную функцию. Вторая особенность — это оператор ожидания. Этот оператор можно использовать только внутри асинхронной функции.
Этот оператор приостанавливает выполнение асинхронной функции, в которую он помещен. Выполнение приостанавливается до тех пор, пока обещание, следующее за этим оператором, не будет разрешено, пока оно не будет выполнено или отклонено. Когда обещание разрешено, await извлекает значение, возвращаемое обещанием, и позволяет работать с ним или присваивать его переменной.
// Синтаксис асинхронной функции:
асинхронная функция myAsyncFunc () {
// Синтаксис await:
// Присваиваем значение, возвращаемое обещанием, переменной:
const val = ждать somePromise ()
// Регистрируем значение, возвращаемое обещанием:
console.log (значение)
}
// Пример обещания и методов его обработчика и асинхронной функции:
// Пример обещания:
// Используйте выборку для получения данных из API:
fetch ('https://currencyapi.net/api/v1/rates?key=7zq3xkh2qeZcnvFhfyDyFlvqx4EmQ7R3N1qq')
// Преобразуем ответ в JSON:
.then (res => res.json ())
// Записываем JSON в консоль:
.then (данные => console.log (данные))
// Регистрируем любые ошибки:
.catch (err => console.log (err))
// Выход:
// {
// действительно: правда,
// обновлено: 1615723207,
// база: 'USD',
// тарифы: {
// AED: 3.67338,
// AFN: 77.705,
// ВСЕ: 103.255,
// // ...
//}
//}
// Пример асинхронной функции:
асинхронная функция getCurrencies () {
// Используем выборку для получения данных из API
// и присваиваем его переменной:
const data = ожидание выборки ('https://currencyapi.net/api/v1/rates?key=7zq3xkh2qeZcnvFhfyDyFlvqx4EmQ7R3N1qq')
// Преобразуем ответ в JSON
// и присваиваем его переменной:
const json = ждать data.json ()
// Записываем JSON в консоль:
console.log (json)
}
// Вызов функции getCurrencies ():
getCurrencies ()
// Выход:
// {
// действительно: правда,
// обновлено: 1615723207,
// база: 'USD',
// тарифы: {
// AED: 3.67338,
// AFN: 77.705,
// ВСЕ: 103.255,
// // ...
//}
//}
// Асинхронный с try ... catch:
асинхронная функция getCurrencies () {
пытаться {
const data = ожидание выборки ('https://currencyapi.net/api/v1/rates?key=7zq3xkh2qeZcnvFhfyDyFlvqx4EmQ7R3N1qq')
const json = ждать data.json ()
console.log (json)
}
catch (err) {
// Регистрируем любые ошибки:
console.log (ошибка)
}
}
getCurrencies ()
// Обещание с асинхронной функцией:
// Создаем функцию, возвращающую обещание:
function myPromiseFunc () {
// Возвращаем обещание:
вернуть новое обещание ((решить) => {
// Разрешаем обещание через 2,5 секунды:
setTimeout (() => {
решить ('Работа сделана!')
}, 2500)
})
}
// Создаем асинхронные функции:
асинхронная функция myAsyncFunction () {
// Вызов функции "myPromiseFunc ()"
// и записываем возвращаемое значение в консоль:
console.log (ожидание myPromiseFunc ())
}
// Вызов функции myAsyncFunction ():
myAsyncFunction ()
console.log ('На самом деле это появится перед обещанием.')
console.log ('Это также появится перед обещанием.')
// Выход:
// 'Фактически это появится перед обещанием.'
// 'Это также появится перед обещанием.'
// 'Работа выполнена!'
Конечные запятые
Это небольшая функция, которая может упростить работу с git или другим элементом управления версиями. Цель этой функции проста. Это позволяет вам заканчивать список параметров функции конечной запятой. Это может показаться странным, но учтите это. Представьте, что у вас есть функция, которая принимает несколько параметров.
Чтобы код был более читабельным, каждый параметр находится в отдельной строке. Вы фиксируете этот код, добавляете его в систему управления версиями. Затем приходит кто-то другой и добавляет новый параметр. Что случилось? Система управления версиями пометит строку новым параметром. Однако он также будет аннотировать строку выше.
Причина проста. Чтобы добавить новый параметр, необходимо добавить новую запятую после последнего существующего параметра. Система управления версиями заметит это изменение и аннотирует две измененные строки: одну со старым параметром, а другую — с новым. Запятая в конце позволяет избежать этого.
Вы добавляете запятую после последнего параметра. Затем, когда кто-то еще добавляет новый параметр, нет необходимости добавлять новую запятую после последнего параметра. Результат? В системе контроля версий помечена только одна измененная строка.
// Перед добавлением нового параметра:
функция myFunc (
parOne,
parTwo,
parThree
) {}
// Перед добавлением нового параметра:
функция myFunc (
parOne,
parTwo,
parThree, // Первое изменение: новый ",".
parFour // Второе изменение: новый параметр.
) {}
// С конечной запятой:
// Перед добавлением нового параметра:
функция myFunc (
parOne,
parTwo,
parThree, // Завершающая запятая теперь действительна.
) {}
// Перед добавлением нового параметра:
функция myFunc (
parOne,
parTwo,
parThree,
parFour, // Первое и единственное изменение: новый параметр.
) {}
Первая, разделяемая память, использует SharedArrayBuffer для создания памяти, которую затем можно использовать совместно между агентами, веб-рабочими процессами и потоками. Второй, атомный, идет рука об руку с общей памятью. Есть одна проблема с SharedArrayBuffer . Это может быть непредсказуемо. Вы действительно не знаете, когда данные будут синхронизированы между агентами.
Одна из причин этого заключается в том, что скорость синхронизации зависит от системы, в которой она работает. Это зависит от доступных ресурсов. Atomics предоставляет вам статические функции, которые помогают сделать атомарные операции более предсказуемыми. Если вы хотите узнать больше о разделяемой памяти и атомике, прочтите это руководство.
Заключение: 7 функций JavaScript ES2017, которые необходимо изучить
Это были семь функций, которые были представлены в ES2017 (ES8). Надеюсь, вам понравился этот урок. Я также надеюсь, что это руководство помогло вам хотя бы немного узнать о том, как работают эти функции ES2017 и как их использовать.
<! —
У вас есть какие-либо вопросы, рекомендации, мысли, советы или подсказки, которыми вы хотели бы поделиться с другими читателями этого блога и со мной? Пожалуйста, поделитесь этим в комментарии. Вы также можете отправить мне письмо. Я хотел бы получить известие от вас.
->
<! —
Хотите еще?
->
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить ни одного сообщения в будущем.
<! —
Кроме того, вы можете найти меня на GitHub, Twitter и Dribbble.
->
Если вы хотите поддержать меня и этот блог, вы можете стать его покровителем или купить мне кофе 🙂
Стать покровителем
Пожертвовать через Paypal
Загрузка...
