After a May Day for a long time, it was found that half of 2018 had passed, and the embarrassing plan could not catch up with the change of time.
Function arguments are allowed to end with a comma
One of the most striking changes to this feature is that every time you delete or add a trailing argument to a function, you have to delete or add a comma after the previous argument. This operation is very unnatural.
In fact, in the ES5 era, commas after the end of objects have been supported, but in JSON, commas are not allowed.
Tip: json.stringify () automatically removes the trailing comma from the object.
String padStart and padEnd
'Yee-hee hee'.padStart(10.The '-') // ------- yi Xi xi
'Yee-hee hee'.padEnd(10.The '-') // yi hee hee -------
Copy the codeTip: Returns the string itself if the length is less than the string itself
Looking at this approach, it’s not hard to think of ways to solve problems like this in the past.
('-- -- -- -- -- -- -- -- -- --' + 'Yee-hee hee').slice(- 10) // ------- yi Xi xi
Copy the codePrior to ES6 we could have implemented the requirement through slice with a fixed padString, but the drawback was obvious: the length of padString was not flexible enough.
(The '-'.repeat(10) + 'Yee-hee hee').slice(- 10) // ------- yi Xi xi
Copy the codeAfter ES6, we can do this by combining repeat with slice, which is much less convenient than padEnd.
Following the meme wars, conversations and comments can be seen almost everywhere. And we need to pay attention to emoji in our string processing:
const s = '😀'
s.length / / 2
Copy the codeThus, truncation may occur when using emoji as padString.
console.log('Yee-hee hee'.padStart(10, s)) // 😀😀😀� yi Xi xi
Copy the codeWhile that can be a headache, there are some interesting things about emoji
const s1 = '👨 👩 👦'
[...s1] // ['👨', '', '👩', '', '👦']
Copy the codeValues and entries of Object
These two methods are similar to object.keys () in ES5:
const fruits = {
apple: 2.orange: 10
}
Object.keys(fruits) // [ 'apple', 'orange' ]
Object.values(fruits) // [2, 10]
Object.entries(fruits) // [ [ 'apple', 2 ], [ 'orange', 10 ] ]
Copy the codeThey both get enumeration properties and do not read the properties on the stereotype.
At this point, you’ll also remember another way to walk through objects:
for (var key in fruits) {
if (fruits.hasOwnProperty(key)) {
console.log(key)
}
}
Copy the codeNo comparison, no harm. For-in reads the properties on the prototype. To avoid unexpected errors, we usually use hasOwnProperty to filter the properties on the prototype.
In summary, the four methods of traversing objects have one thing in common: they only get enumeration properties. So what if we want to get non-enumeration properties?
Object.defineProperty(fruits, 'peach', {
value: 18.enumerable: false
})
Object.getOwnPropertyNames(fruits).filter(item= >! fruits.propertyIsEnumerable(item))// [ 'peach' ]
Copy the codeIn ES6, we can use Symbol as the property name to solve the uniqueness problem caused by the string name. Can we obtain the Symbol attribute name?
Object.defineProperty(fruits, Symbol('banana'), {
value: 20
})
Object.getOwnPropertySymbols(fruits) // [ Symbol(banana) ]
Copy the codeEnumeration attribute, non-enumeration attribute, and Symbol attribute
Reflect.ownKeys(fruits) // [ 'apple', 'orange', 'peach', Symbol(banana) ]
Copy the codeFour, the Object of getOwnPropertyDescriptors another method
This approach should be familiar, since in ES5 we define objects using:
const obj = {}
Object.defineProperty(obj, 'name', {
value: 'xiaoyun'.enumerable: true.writable: true.configurable: true
})
Copy the codeAnd we’ll use getOwnPropertyDescriptor to get its descriptor property:
Object.getOwnPropertyDescriptor(obj, 'name')
Copy the codeTip: The default descriptor property for attributes declared by object literals is true and the default value for attributes declared by defineProperty is false
So when you look at the method name, you know what it does:
Object.getOwnPropertyDescriptors(obj)
Copy the codeOf course, it’s not just because of this problem. A copy of the new method in the ES6 assign, it does not handle the descriptor attribute, so involves the descriptor attributes of objects, cannot copy by the assign, so a getOwnPropertyDescriptors method, we can handle set properties descriptor object like this:
Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj))
Copy the codeFive, the async/await
For this new feature to come out, it’s really amazing.
Async has been discussed for a long time, so many people think it is an ES6 or ES7 standard. In fact, it was officially listed as an ES8 standard in 2017.
With async/await, you must know:
- Async is used to declare an asynchronous function, and it returns a Promise by default;
- The await operator must be used in async;
- The await operator must be followed by a Promise object. If it is a normal object, it will be wrapped with promise.resolve () by default.
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)
Copy the codeFetchNumber: fetchNumber: fetchNumber: fetchNumber: fetchNumber: fetchNumber: fetchNumber: fetchNumber: fetchNumber
const [num1, num2] = await Promise.all([fetchNumber(), fetchNumber()])
Copy the codeOf course, if the two methods are interdependent, then you need to:
const num1 = await fetchNumber()
const num2 = await fetchNumber()
Copy the codeFor async exception handling, the try/catch method is basically used, of course, there is also a try/catch portal.
Refer to the article
- Here are examples of everything new in ECMAScript 2016, 2017, and 2018
- Asynchronous functions – Improves the ease of use of Promise
For those of you who like this article, please follow my subscription account for more content.
