English | https://javascript.plainenglish.io/6-amazing-and-useful-new-javascript-features-in-es13-b0719dfa0541
1. at
When we want to get the Nth element of an array, we usually use [] to get it.
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
console.log(array[ 1 ], array[ 0 ]) // medium fatfishOh, that doesn't seem like an uncommon occurrence. But friends, please recall for me, if we want to get the last Nth element of the array, what will we do?
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
const len = array.length
console.log(array[ len - 1 ]) // fish
console.log(array[ len - 2 ]) // fat
console.log(array[ len - 3 ]) // blogThis looks ugly and we should be looking for a more elegant way of doing this. Yes, please use the at method of the array in the future!
It makes you look like an advanced developer.
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
console.log(array.at(-1)) // fish
console.log(array.at(-2)) // fat
console.log(array.at(-3)) // blog2.Object.hasOwn
Yes, there are usually two ways, what is the difference between them?
"name" in the object
obj.hasOwnProperty('name')
"in" operator
The in operator returns true if the specified property is in the specified object or its prototype chain.
const Person = function (age) {
this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log('age' in p1) // true
console.log('name' in p1) // true pay attention hereobj.hasOwnProperty
The hasOwnProperty method returns a Boolean value indicating whether the object has the specified property as its own (rather than inheriting it).
Using the same example above
const Person = function (age) {
this.age = age
}
Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log(p1.hasOwnProperty('age')) // true
console.log(p1.hasOwnProperty('name')) // fasle pay attention hereMaybe "obj.hasOwnProperty" can already filter out properties on the prototype chain, but it is not safe in some cases and will cause the program to fail.
Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a functionObject.hasOwn
Don't worry, we can use "Object.hasOwn" to circumvent these two problems, which is more convenient and safer than the "obj.hasOwnProperty" method.
let object = { age: 24 }
Object.hasOwn(object, 'age') // true
let object2 = Object.create({ age: 24 })
Object.hasOwn(object2, 'age') // false The 'age' attribute exists on the prototype
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false an object that does not inherit from "Object.prototype"3. Use "await" at the top level of the module
The await operator from mdn is used to await a Promise and get its fulfillment value.
const getUserInfo = () => {
return new Promise((rs) => {
setTimeout(() => {
rs({
name: 'fatfish'
})
}, 2000)
})
}
// If you want to use await, you must use the async function.
const fetch = async () => {
const userInfo = await getUserInfo()
console.log('userInfo', userInfo)
}
fetch()
// SyntaxError: await is only valid in async functions
const userInfo = await getUserInfo()
console.log('userInfo', userInfo)
In fact, after ES13, we can use await at the top level of modules, which is a very exciting new feature for developers. That's great.
const getUserInfo = () => {
return new Promise((rs) => {
setTimeout(() => {
rs({
name: 'fatfish'
})
}, 2000)
})
}
const userInfo = await getUserInfo()
console.log('userInfo', userInfo)
4. Use "#" to declare private properties
In the past, we used "_" to represent private properties, but it was not safe and could still be modified externally.
class Person {
constructor (name) {
this._money = 1
this.name = name
}
get money () {
return this._money
}
set money (money) {
this._money = money
}
showMoney () {
console.log(this._money)
}
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
console.log(p1._money) // 1
p1._money = 2 // Modify private property _money from outside
console.log(p1.money) // 2
console.log(p1._money) // 2We can use "#" to achieve truly safe private properties
class Person {
#money=1
constructor (name) {
this.name = name
}
get money () {
return this.#money
}
set money (money) {
this.#money = money
}
showMoney () {
console.log(this.#money)
}
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
// p1.#money = 2 // We cannot modify #money in this way
p1.money = 2
console.log(p1.money) // 2
console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class5. Easier to set member variables for classes
In addition to setting private properties for the class through "#", we can also set the member variables of the class in a new way.
class Person {
constructor () {
this.age = 1000
this.name = 'fatfish'
}
showInfo (key) {
console.log(this[ key ])
}
}
const p1 = new Person()
p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000Now you can use the following method, which is indeed more convenient to use.
class Person {
age = 1000
name = 'fatfish'
showInfo (key) {
console.log(this[ key ])
}
}
const p1 = new Person()
p1.showInfo('name') // fatfish
p1.showInfo('age') // 10006. Find elements from the end of the array
When we want to find elements that meet certain conditions from an array, both find and findIndex are good choices.
const array = Array(10000000).fill(1)
array.push(2)
const d1 = Date.now()
const el = array.find((el) => el >= 2)
const d2 = Date.now()
console.log({ el, time: d2 - d1 })
Got 2, and the lookup took 84 milliseconds, which is a scary number and takes way too long.
Fortunately, starting with ES13, using findLast will greatly reduce its lookup time if you previously specified that the target element is closer to the end.
const array = Array(10000000).fill(1)
array.push(2)
const d1 = Date.now()
const el = array.findLast((el) => el >= 2)
const d2 = Date.now()
console.log({ el, time: d2 - d1 })
Summarize
learn more skills
Please click the public number below
