七個新的ES2022 JavaScript 功能，你千萬不要錯過了

作者：佚名 2022-09-19 00:46:18

這些功能已經發布了一段時間，現在讓我們一起來看一下！

?1.私有字段

以前，必須在構造函數中定義所有類字段。而且沒有私人領域，所有字段都可以從外部訪問。當然，有一些技巧范圍使一些變量無法訪問。但是，讓我們不要談論他們。

class Counter {
  constructor() {
    this.name = 'Counter';
    this.count = 0;
  }


  inc() {
    this.count++;
  }
}

現在我們可以簡單地寫：

class Counter {
  name = 'Counter';
  #count = 0;  // private field!
  inc() {
    this.#count++;
  }
}

2.使用關鍵字檢查訪問私有字段?

私人領域帶來了一些問題。當在沒有該對象上訪問私有字段時，將拋出錯誤。但是如何檢查對象是否有？使用嘗試/捕獲！

現在有一個更好的方法：in關鍵字中。

class Counter {
  name = 'Counter';
  #count = 0;
static isCounter(obj) {
    return #count in obj;
  }
}
const counter = new Counter();
Counter.isCounter(counter);   // true

3. at（）方法的數組和字符串

我們可以通過編寫[i]來訪問位置A[i]的數組的項目。但是，如果我是負的，并且我們想從數組的末端獲得元素怎么辦？我們可以編寫[a.length + i]。但這不是很方便。另一種方法是使用A.slice（i）[0]。但這不是很有效。

為此有at（）方法：

const A = [2, 4, 6, 8, 10]
A.at(-1)    // 10
const S = "Hello World"
S.at(-1)    // 'd'

4.使用 findLast() 從數組的末尾開始查找一個項目

如何在數組中找到一個項目？使用find（）方法。以及如何從最后找到？使用reverse()和find()，或者編寫自己的函數：

const A = [1, 20, 3, 40, 5];
function findBackward(A, predicate) {
  for (let i = A.length-1; i>=0; i--) {
    if (predicate(A[i])) {
      return A[i];
    }
  }
  return -1;
}
findBackward(A, x => x % 10 == 0);    // 40
// be careful with this method!
A.reverse().find(x => x % 10 == 0);   // 40

現在，我們可以使用Findlast（）和FindlastIndex（）方法：

const A = [1, 20, 3, 40, 5];
A.find(v => v%10 == 0)     // 20
A.findLast(v => v%10 == 0) // 40
A.findIndex(v => v%10 == 0)     // 1
A.findLastIndex(v => v%10 == 0) // 3
A.findLastIndex(v => v == 0)    // -1

5.讓我們使用Hasown（）而不是HasownProperty（）

有object.prototype.hasownproperty（）方法來檢查對象是否具有屬性為其直接屬性。但是使用很麻煩：

let hasOwnProperty = Object.prototype.hasOwnProperty;
if (hasOwnProperty.call(object, 'foo')) {
  console.log('has property foo');
}

但是,我們現在可以這樣寫：

object.hasOwnProperty('foo')

請記住，JavaScript是一種動態語言。我們可以將屬性添加到任何對象。因此，HasownProperty（）可以被具有相同名稱的對象的屬性遮蔽。為了避免這種情況，我們可以使用Hasown（）方法：

if (Object.hasOwn(object, 'foo')) {
  console.log('has property foo');
}

6.原因是一個錯誤的新屬性

看到這樣的錯誤處理代碼非常常見：

await fetch('https://example.com/data.csv')
  .catch((err) => {
     throw new Error('failed to get: ' + err.message);
  })

它的作用是將原始錯誤用新錯誤包裹，但是原始錯誤丟失了。現在，我們可以使用原因屬性存儲原始錯誤并稍后檢索：

await fetch('https://example.com/data.csv')
  .catch((err) => {
     throw new Error('failed to get', { cause: err })
  })
  .catch((err) => {
     console.log('cause', err.cause)
  })

7.＃！Hashbang現在得到支持

Hashbang現在得到了支持，我們可以直接在終端運行nodejs腳本：

#!/usr/bin/env node
'use strict';
console.log(1);

或者：

#!/usr/bin/env node
export {};
console.log(1);

總結

以上就是我今天與你分享的7個有關ES2022的新功能，希望對你有所幫助，也希望你能從中學到新的知識。

最后，感謝你的閱讀。

責任編輯：華軒來源： web前端開發

JavaScrip 功能開發