六個(gè) ES13 中非常實(shí)用的新 JavaScript 特性

作者：佚名 2023-04-19 15:26:52

今天我們一起來(lái)聊一聊六個(gè)ES13 中非常實(shí)用的新 JavaScript 特性都有哪些吧。

1. at

當(dāng)我們想要獲取數(shù)組的第 N 個(gè)元素時(shí)，我們通常使用 [] 來(lái)獲取。

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]


console.log(array[ 1 ], array[ 0 ]) // medium fatfish

哦，這似乎不是什么稀罕事。但是請(qǐng)朋友們幫我回憶一下，如果我們想得到數(shù)組的最后第N個(gè)元素，我們會(huì)怎么做呢？

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

這看起來(lái)很難看，我們應(yīng)該尋求一種更優(yōu)雅的方式來(lái)做這件事。是的，以后請(qǐng)使用數(shù)組的at方法！

它使您看起來(lái)像高級(jí)開(kāi)發(fā)人員。

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

是的，通常有兩種方式，它們有什么區(qū)別呢？

對(duì)象中的“名稱”
obj.hasOwnProperty('名稱')

“in”運(yùn)算符

如果指定屬性在指定對(duì)象或其原型鏈中，則 in 運(yùn)算符返回 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 here

obj.hasOwnProperty

hasOwnProperty 方法返回一個(gè)布爾值，指示對(duì)象是否具有指定的屬性作為其自身的屬性（而不是繼承它）。

使用上面相同的例子：

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”已經(jīng)可以過(guò)濾掉原型鏈上的屬性，但在某些情況下并不安全，會(huì)導(dǎo)致程序失敗。

Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

不用擔(dān)心，我們可以使用“Object.hasOwn”來(lái)規(guī)避這兩個(gè)問(wèn)題，比“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”

來(lái)自 mdn 的 await 操作符用于等待一個(gè) 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)

事實(shí)上，在 ES13 之后，我們可以在模塊的頂層使用 await，這對(duì)于開(kāi)發(fā)者來(lái)說(shuō)是一個(gè)非常令人高興的新特性。那太棒了。

const getUserInfo = () => {
  return new Promise((rs) => {
    setTimeout(() => {
      rs({
        name: 'fatfish'
      })
    }, 2000)
  })
}


const userInfo = await getUserInfo()
console.log('userInfo', userInfo)

4.使用“#”聲明私有屬性

以前我們用“_”來(lái)表示私有屬性，但是不安全，仍然有可能被外部修改。

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

我們可以使用“#”來(lái)實(shí)現(xiàn)真正安全的私有屬性。

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 class

5. 更容易為類設(shè)置成員變量

除了通過(guò)“#”為類設(shè)置私有屬性外，我們還可以通過(guò)一種新的方式設(shè)置類的成員變量。

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

現(xiàn)在你可以使用下面的方式，使用起來(lái)確實(shí)更加方便。

class Person {
  age = 1000
  name = 'fatfish'


  showInfo (key) {
    console.log(this[ key ])
  }
}


const p1 = new Person()


p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

6.從數(shù)組末尾查找元素

當(dāng)我們想從數(shù)組中找到滿足一定條件的元素時(shí)，find 和 findIndex 都是不錯(cuò)的選擇。

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，查找時(shí)間用了84毫秒，這是一個(gè)很恐怖的數(shù)字，而且耗時(shí)太長(zhǎng)了。

幸運(yùn)的是，從 ES13 開(kāi)始，如果你之前指定目標(biāo)元素更靠近尾部，使用 findLast 將大大減少其查找時(shí)間。

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 })