JavaScript在過去10年里取得了長足的進步，每一年都有全新的功能升級。

還記得我們以前是這樣創(chuàng)建"類"的嗎？

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

是的，變化很大！

讓我們來看看ES10（2019年）中引入的7個最重要的特性，看看你是否錯過了其中一些。

1. 即時模塊化：動態(tài)import

ES10那年很棒，import現(xiàn)在可以像require()一樣作為函數(shù)使用。一個async函數(shù)。

將import保持在頂層不再是必須的；我們現(xiàn)在可以在編譯時輕松解析模塊的名稱。

為了高性能，可以選擇性地只在絕對需要時加載模塊...

if (user.is_admin) {
  const admin = await import('./admin.js');
  admin.setupDashboard();
}

基于用戶或變量輸入加載模塊...

const language = 'french';
const translations = await import(`./translations/${language}.js`);

它也非常適合使用不再支持require()的ES模塊：

2. 扁平化曲線

flat()和flatMap()提供了更清晰的方式來輕松扁平化多維數(shù)組。

消除了痛苦的數(shù)組循環(huán)扁平化代碼的需求：

flatMap()相當于調(diào)用map()，然后flat(1)：

3. 將數(shù)組轉(zhuǎn)換為對象

ES10還引入了Object.fromEntries()到JavaScript世界。

快速將鍵值對列表轉(zhuǎn)換為等效的鍵值對象：

const entries = [['name', 'John'], ['age', 30]];
const obj = Object.fromEntries(entries);
console.log(obj); // { name: 'John', age: 30 }

4. 精確清理你的字符串

trimStart()和trimEnd()。

在此之前，每個人都在使用NPM的trim - 愉快地給項目增加3.35KB...

即使現(xiàn)在：

npm i trim

然后Array trim()出現(xiàn)了，接著是trimStart()和trimEnd()。

const str = '   Hello, World!   ';
console.log(str.trimStart()); // 'Hello, World!   '
console.log(str.trimEnd());   // '   Hello, World!'

5. 捕獲錯誤而不帶包袱

通過新的可選catch綁定，當你對錯誤參數(shù)無所作為時，現(xiàn)在可以安全地省略catch塊的錯誤參數(shù)：

6. 無驚喜排序

穩(wěn)定的數(shù)組排序。

以前，在對數(shù)組進行排序時，我們絕對無法保證相等元素的排列。

但在ES10之后的JS代碼中，我們100%確定react總是在vue之前，vue總是在angular之前。

7. 要么做大，要么回家：BigInt

BigInt的名稱揭示了它的目的：用于加載難以置信的巨大整數(shù)值：

因為普通整數(shù)做不到：

最后的思考

ES10為JavaScript標志著一個重要的飛躍，引入了幾個對現(xiàn)代開發(fā)至關(guān)重要的特性。

使用它們來編寫更清晰、更簡潔、更具表現(xiàn)力和清晰度的代碼。