1. at
當我們想要獲取數組的第 N 個元素時，我們通常使用 [] 來獲取。
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
console.log(array[ 1 ], array[ 0 ]) // medium fatfish
哦，這似乎不是什么稀罕事。但是請朋友們幫我回憶一下，如果我們想得到數組的最后第N個元素，我們會怎么做呢？
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 ]) // blog
這看起來很難看，我們應該尋求一種更優雅的方式來做這件事。是的，以后請使用數組的at方法！
它使您看起來像高級開發人員。
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
console.log(array.at(-1)) // fish
console.log(array.at(-2)) // fat
console.log(array.at(-3)) // blog
2.Object.hasOwn
是的，通常有兩種方式，它們有什么區別呢？
- 對象中的“名稱”
- obj.hasOwnProperty('名稱')
“in”運算符
如果指定屬性在指定對象或其原型鏈中，則 in 運算符返回 true。
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
hasOwnProperty 方法返回一個布爾值，指示對象是否具有指定的屬性作為其自身的屬性（而不是繼承它）。
使用上面相同的例子：
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 here也許“obj.hasOwnProperty”已經可以過濾掉原型鏈上的屬性，但在某些情況下并不安全，會導致程序失敗。
Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a functionObject.hasOwn
不用擔心，我們可以使用“Object.hasOwn”來規避這兩個問題，比“obj.hasOwnProperty”方法更方便也更安全。
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.在模塊的頂層使用“await”
來自 mdn 的 await 操作符用于等待一個 Promise 并獲取它的 fulfillment 值。
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)
事實上，在 ES13 之后，我們可以在模塊的頂層使用 await，這對于開發者來說是一個非常令人高興的新特性。那太棒了。
const getUserInfo = () => {
return new Promise((rs) => {
setTimeout(() => {
rs({
name: 'fatfish'
})
}, 2000)
})
}
const userInfo = await getUserInfo()
console.log('userInfo', userInfo)
4.使用“#”聲明私有屬性
以前我們用“_”來表示私有屬性，但是不安全，仍然有可能被外部修改。
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) // 2我們可以使用“#”來實現真正安全的私有屬性。
class Person {
#mnotallow=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. 更容易為類設置成員變量
除了通過“#”為類設置私有屬性外，我們還可以通過一種新的方式設置類的成員變量。
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') // 1000現在你可以使用下面的方式，使用起來確實更加方便。
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 和 findIndex 都是不錯的選擇。
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 })
得到2，查找時間用了84毫秒，這是一個很恐怖的數字，而且耗時太長了。
幸運的是，從 ES13 開始，如果你之前指定目標元素更靠近尾部，使用 findLast 將大大減少其查找時間。
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 })
