ES2022 中的4個最重要的特性

banq發表於2022-02-07

ECMAScript 2022 是一項新的 JavaScript 標準，將於 2022 年 6 月釋出。
 

1. 陣列中的at()方法
ES2022將為我們提供一種可能性，即從末端索引類似陣列的物件。這是一個很小的功能，但它提高了處理陣列或字串時的核心可讀性。
At()方法中的正數與[]索引的作用相同，但如果是負數，則允許從末尾訪問數值。
原來：

const arr = [1,2,3,4]
arr[arr.length - 2] // 3
arr.slice(-2)[0]    // 3

const str = "1234"
str[str.length - 2] // '3'
str.slice(-2)[0]    // '3'


新的at()方法：

const arr = [1,2,3,4]
arr.at(-2) // 3

const str = "1234"
str.at(-2) // '3'


 
2. 錯誤原因
.cause物件上的.cause屬性將允許我們指定哪個錯誤導致其他錯誤。非常不言而喻吧？在這裡你可以看到這個新功能的一個使用例子。

try {
  doSomeComputationThatThrowAnError() 
} catch (error) {
  throw new Error('I am the result of another error', { cause: error })
}

錯誤原因將是一個完美的方法，可以將錯誤連在一起，這在其他程式語言如Java中是可能的。
 
3. 頂層的await
你知道你不能在函式之外的程式碼中直接使用await嗎？如果不知道，那麼這對你來說不是什麼大問題。但對於其他人來說--不必擔心，因為ES2022將改變這一點。
  • 它允許動態地載入模組 

const serviceName = await fetch("https://example.com/what-service-should-i-use")
const service = await import(`/services/${serviceName}.js`)

// OR

const params = new URLSearchParams(location.search);
const theme = params.get('theme');
const stylingFunctions = await import(`/styling-functions-${theme}.js`);

  • 它允許有條件地渲染模組 

const date = new Date()

if(date.getFullYear() === 2023) {
  await require('/special-code-for-2023-year.js')
}

 
4. 私有槽slot和方法
純Javascript中的類從ES6開始就存在了，但與物件導向的語言相比，它們的開發程度要低很多。許多開發者使用Typescript來包含其中的一些功能，現在我們可以看到在純Javascript類中被實現。
私有槽是其中之一。它們只不過是類的私有屬性。ES2022將為我們提供建立它們的可能性，當我們試圖在類之外訪問它們時，會得到一個錯誤。私有方法也是如此。有趣的是，JS團隊選擇給他們字首（這與JS的傳統有關嗎？）

class Human {
  name = "John";
  
  setName(name) {
    this.name = name;
  }
}

const human = new Human()
human.name = 'Amy'  // ERROR!
human.setName('Amy') // OK


私有方法：

class Human {
  name = "John";
  
  constructor(name) {
    this.setName('Amy') // OK
  }
  
  setName(name) {
    this.name = name;
  }
}

const human = new Human()
human.setName('Amy') // ERROR!



 

相關文章