七個新的ES2022 JavaScript 功能，你千萬不要錯過了
作者：佚名
這些功能已經發布了一段時間，現在讓我們一起來看一下！
?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腳本：
'use strict';
console.log(1);
或者：
export {};
console.log(1);
總結
以上就是我今天與你分享的7個有關ES2022的新功能，希望對你有所幫助，也希望你能從中學到新的知識。
最后，感謝你的閱讀。
責任編輯：華軒
來源：
web前端開發
