После пятидесяти одного длинного, найденного в 2018 году, уже половина, но планы не отставать от изменений неловких моментов.
Во-первых, параметры функции позволяют использовать запятые в конце.
Я все еще очень впечатлен этим изменением функции: всякий раз, когда вы удаляете или добавляете параметр в конце функции, вы должны удалить или добавить запятую после предыдущего параметра. Такая операция безумна.
Просматривая документацию, на самом деле написание запятых в конце объектов поддерживалось еще в эпоху ES5, но запятые после конца не разрешены в JSON.
Совет: JSON.stringify() автоматически удалит конечные запятые из объектов.
Во-вторых, padStart и padEnd строки
'咦嘻嘻'.padStart(10, '-') // -------咦嘻嘻
'咦嘻嘻'.padEnd(10, '-') // 咦嘻嘻-------
Совет: если длина меньше длины самой строки, верните саму строку
Увидев этот метод, нам нетрудно подумать, какие методы применялись бы для решения подобных задач раньше.
('----------' + '咦嘻嘻').slice(-10) // -------咦嘻嘻
До ES6 мы могли добиться этого, добавив в слайс фиксированную строку padString.Очевидно, что недостаток тоже очевиден: длина padString недостаточно гибкая.
('-'.repeat(10) + '咦嘻嘻').slice(-10) // -------咦嘻嘻
После входа в ES6 мы можем добиться этого через повтор в сочетании со слайсом, конечно, это гораздо менее удобно, чем padEnd.
После войны эмодзи эмодзи в чате и комментариях можно увидеть практически везде. И нам нужно обратить внимание на выражения эмодзи при обработке строк:
const s = '😀'
s.length // 2
Видно, что усечение может произойти, когда эмодзи используется как padString.
console.log('咦嘻嘻'.padStart(10, s)) // 😀😀😀�咦嘻嘻
Хотя это головная боль, но есть и некоторые смайликиЗабавные факты
const s1 = '👨👩👦'
[...s1] // [ '👨', '', '👩', '', '👦' ]
3. Значения объекта и записи
Эти два метода аналогичны Object.keys() в ES5:
const fruits = {
apple: 2,
orange: 10
}
Object.keys(fruits) // [ 'apple', 'orange' ]
Object.values(fruits) // [ 2, 10 ]
Object.entries(fruits) // [ [ 'apple', 2 ], [ 'orange', 10 ] ]
Они оба получают свойства перечисления и не читают свойства прототипа.
На самом деле, здесь вы также придумаете другой способ обхода объектов:
for (var key in fruits) {
if (fruits.hasOwnProperty(key)) {
console.log(key)
}
}
Никакого сравнения, никакого вреда, for-in будет читать свойства прототипа.Чтобы избежать непредвиденных ошибок, мы обычно используем hasOwnProperty для фильтрации свойств прототипа.
Подводя итог вышеприведенным четырем методам обхода объектов, можно сказать, что у них есть одна общая черта: они получают только свойства перечисления, поэтому вопрос в том, что если вы хотите получить свойства, не относящиеся к перечислению?
Object.defineProperty(fruits, 'peach', {
value: 18,
enumerable: false
})
Object.getOwnPropertyNames(fruits).filter(item => !fruits.propertyIsEnumerable(item)) // [ 'peach' ]
Внимательные студенты здесь также могут столкнуться с проблемой: в ES6, чтобы решить проблему уникальности, вызванную строками в качестве имен атрибутов, в качестве имени атрибута можно использовать символ, поэтому можно ли получить имя атрибута символа по книге?
Object.defineProperty(fruits, Symbol('banana'), {
value: 20
})
Object.getOwnPropertySymbols(fruits) // [ Symbol(banana) ]
Тут я вдруг вспомнил разговор Xiangguo.Конечно, нам нужны перечисляемые атрибуты, неперечисляемые атрибуты и атрибуты Symbol:
Reflect.ownKeys(fruits) // [ 'apple', 'orange', 'peach', Symbol(banana) ]
В-четвертых, еще один метод для объекта getOwnPropertyDescriptors.
Вы должны быть знакомы с этим методом, потому что в ES5 мы используем:
const obj = {}
Object.defineProperty(obj, 'name', {
value: 'xiaoyun',
enumerable: true,
writable: true,
configurable: true
})
И будет использовать getOwnPropertyDescriptor для получения свойства дескриптора:
Object.getOwnPropertyDescriptor(obj, 'name')
Совет. Значением по умолчанию свойства дескриптора для свойств, объявленных с помощью литералов объектов, является true, а значением по умолчанию свойств дескриптора для свойств, объявленных с помощью defineProperty, является false.
Поэтому, когда вы видите это имя метода, вы, естественно, знаете, что он делает:
Object.getOwnPropertyDescriptors(obj)
Конечно, это не только из-за этой проблемы. Новый метод копирования assign в ES6 не обрабатывает свойства дескриптора, поэтому объекты, включающие свойства дескриптора, нельзя копировать с помощью assign, поэтому с помощью метода getOwnPropertyDescriptors мы можем обрабатывать объекты, которые устанавливают свойства дескриптора следующим образом:
Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj))
5. асинхронно/ожидание
Появление этой новой функции действительно впечатляет.
Совет: На самом деле асинхронность обсуждается давно, поэтому многие думают, что это стандарт ES6 или ES7.На самом деле он был официально включен в стандарт в 2017 году и должен принадлежать стандарту ES8.
Для async/await вы должны знать:
- async используется для объявления асинхронной функции и по умолчанию возвращает объект Promise;
- Оператор await должен использоваться в асинхронном режиме;
- Оператор ожидания должен сопровождаться объектом обещания. Если это нормальный объект, он будет обернутым с обещанием. Resolve () по умолчанию.
function fetchNumber () {
return new Promise((resolve, reject) => {
setTimeout(_ => {
const num = Number.parseInt(Math.random() * 10)
if (num >= 5) {
resolve(num)
} else {
reject(new Error(`${num} is smaller than 5`))
}
}, 1000)
})
}
async function task () {
try {
const num = await fetchNumber()
return num
} catch (e) {
return Promise.reject(e.message)
}
}
task().then(console.log).catch(console.log)
При использовании async не впадайте в недоразумение из-за его синхронного написания.В частности, нам нужно проанализировать нашу асинхронность.Например, когда мы вызываем несколько fetchNumbers, между ними нет зависимости, поэтому мы должны написать:
const [num1, num2] = await Promise.all([fetchNumber(), fetchNumber()])
Конечно, если эти два метода взаимозависимы, то нужно:
const num1 = await fetchNumber()
const num2 = await fetchNumber()
Для обработки исключений асинхронности в основном используется метод try/catch.Конечно, есть и критики try/catch.портал.
Справочная статья
- Here are examples of everything new in ECMAScript 2016, 2017, and 2018
- Асинхронные функции — упростите использование промисов
Друзья, которым понравилась эта статья, прошу обратить внимание на мой номер подпискилюблю набирать код, узнать больше.