2022 年你應該嘗試的 8個 JavaScript 新功能

大家好，我是半夏👴，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注? 點贊 👍 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識！點我探索新世界！

掃碼或搜索添加文末公眾號「搞前端的半夏」：
🍗 硬核資料：領取1000+PPT模板、100+簡歷模板、行業經典書籍PDF，
🍗 回復 ”網站模板“，免費送網站模板！
🍗 回復 ”面試“：免費送你面試題庫！
🍗 加我：frontendpicker, 更多精彩等你來！
🍗 回復[演算法]，獲取各種演算法資料！

1995年12月4日，Netscape 公司與 Sun 公司聯合發布JavaScript 以來，JavaScript從推出就開始了飛速的發展，2015年6，ES6正式發布，此后JavaScript正式進入新階段，成為企業級大規模開發語言，并仍以高速度不斷發展，

下面的表格對應這版本變化：

本文主要介紹幾個已經進入stage4的提案，這幾個提案有望在2022年逐步納入標準，（請注意：納入標準并不等同于瀏覽器支持）

PS：科普-Javascript的新語法，從提出到納入標準一共經歷下面幾個stage

stage-0：新語法還是一個設想，（只能由TC39成員或TC39貢獻者提出）

stage-1:：提案階段，比較正式的提議，只能由TC39成員發起，這個提案要解決的問題必須有正式的書面描述，

stage-2：草案，有了初始規范，必須對功能語法和語意進行正式描述，包括一些實驗性的實作，

stage-3：候選，該提議基本已經實作，需要等待實驗驗證，用戶反饋及驗收測驗通過，

stage-4：已完成，必須通過 Test262 驗收測驗，下一步就納入ECMA標準，

.at()

TC39建議在所有基本可索引類，例如：陣列、字串、類陣列（arguments）中添加.at（）方法，

例如

lat arr=[1,2,3,4,5]

之前我們想獲取陣列中的第二位

arr[1] //2

最后一位的話，可能就是

arr[4] // 5

但是如果arr長度是動態的呢？我們要如何讓取出最后一位? 通常的寫法是：

arr[arr.length-1]

但是有了.at()方法就很簡單了，.at()支持正索引和負索引，

例如

arr.at(-1)  //5
arr.at(-2)  //4

具體提案：https://github.com/tc39/proposal-relative-indexing-method

Object.hasOwn(object, property)

Object.hasOwn(object, property)主要是用來替代Object.prototype.hasOwnProperty()，

目前我們想要判斷物件是否具有指定的物件，主要寫法如下：

if (Object.prototype.hasOwnProperty.call(object, "fn")) {
  console.log('有')
}

而Object.hasOwn的寫法：

if (Object.hasOwn(object, "fn")) {
  console.log("有")
}

具體提案：https://github.com/tc39/proposal-accessible-object-hasownproperty

目前來看，V8引擎的9.3版本已經開始支持，所以說chrome應該會很快支持，

類的私有方法和getter/setter

類是所有支持面向物件語言的基本，而Javascript雖然支持使用class定義類，但是并沒有提供 定義私有屬性/方法的的 方案，本提案提出使用**#**來定義私有屬性/方法

class Person{
    name = '小芳';
    #age = 16;
    consoleAge(){
       console.log(this.#age)
    }
}
const person = new Person();
console.log(person.name); //小芳
console.log(button.#age); //報錯
button.#value = false;//報錯

具體提案：https://github.com/tc39/proposal-private-methods

檢查私有屬性和方法

因為新的標準會支持私有屬性和方法，當我們訪問不存在的私有屬性/方法會報錯，而在新標準中也考慮了這個情況，提供了in來檢查私有屬性和方法是否存在

class C {
  #brand;

  #method() {}

  get #getter() {}

  static isC(obj) {
    return #brand in obj && #method in obj && #getter in obj;
  }
}

具體提案：https://github.com/tc39/proposal-private-fields-in-in

Top-level await（頂層await）

目前，我們使用await必須是在申明async的函式中，本提案，主要是支持在沒有async的情況下使用await

例如下面幾種使用場景：

動態引入依賴

const strings = await import(`/i18n/${navigator.language}`);

這允許模塊使用運行時值來確定依賴關系，這對于開發/生產拆分、國際化、環境拆分等非常有用，

資源初始化

const connection = await dbConnector();

這允許模塊表示資源，并在模塊永遠無法使用的情況下產生錯誤，

加載依賴

let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

具體提案：https://github.com/tc39/proposal-top-level-await

正則匹配索引

該提案提供了一個新的/d，用來獲取每個匹配的開始位置和結束位置資訊，

const str = 'The question is TO BE, or not to be, that is to be.';
const regex = /to be/gd;

const matches = [...str.matchAll(regex)];
matches[0];

具體提案：https://github.com/tc39/proposal-regexp-match-indices

new Error()拋出例外的具體原因

new Error(),可能大家第一反應是，這不是已經存在的語法嘛，是的，沒錯！只是新的提案：將錯誤與原因相關聯，，向具有屬性的Error() 建構式添加一個附加選項引數cause，其值將作為屬性分配給錯誤實體，

async function doJob() {
  const rawResource = await fetch('//domain/resource-a')
    .catch(err => {
      throw new Error('Download raw resource failed', { cause: err });
    });
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('//domain/upload', { method: 'POST', body: jobResult })
    .catch(err => {
      throw new Error('Upload job result failed', { cause: err });
    });
}

try {
  await doJob();
  throw new Error('Upload job result failed', { cause: err });
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}
// Error: Upload job result failed
// Caused by TypeError: Failed to fetch

具體提案：https://github.com/tc39/proposal-error-cause

類static初始化塊

本提案針對靜態欄位和靜態私有欄位的提供了一種在 ClassDefinitionEvaluation 期間執行類靜態端的每個欄位初始化的機制-static blocks.例如官方提供的例子：

在沒有static blocks之前，我們想給靜態變數初始化（非直接賦值，可能是運算式賦值）的話，可能是放在外部實作：

// without static blocks:
class C {
  static x = ...;
  static y;
  static z;
}

try {
  const obj = doSomethingWith(C.x);
  C.y = obj.y
  C.z = obj.z;
}
catch {
  C.y = ...;
  C.z = ...;
}

有了static block的情況下：我們可以直接在static blocks中初始化變數：

class C {
  static x = ...;
  static y;
  static z;
  static {
    try {
      const obj = doSomethingWith(this.x);
      this.y = obj.y;
      this.z = obj.z;
    }
    catch {
      this.y = ...;
      this.z = ...;
    }
  }
}