七個(gè)新的ES2022 JavaScript 功能,你千萬不要錯(cuò)過了
?1.私有字段
以前,必須在構(gòu)造函數(shù)中定義所有類字段。而且沒有私人領(lǐng)域, 所有字段都可以從外部訪問。當(dāng)然,有一些技巧范圍使一些變量無法訪問。但是,讓我們不要談?wù)撍麄儭?/p>
class Counter {
constructor() {
this.name = 'Counter';
this.count = 0;
}
inc() {
this.count++;
}
}
現(xiàn)在我們可以簡單地寫:
class Counter {
name = 'Counter';
#count = 0; // private field!
inc() {
this.#count++;
}
}
2.使用關(guān)鍵字檢查訪問私有字段?
私人領(lǐng)域帶來了一些問題。當(dāng)在沒有該對(duì)象上訪問私有字段時(shí),將拋出錯(cuò)誤。但是如何檢查對(duì)象是否有?使用嘗試/捕獲!
現(xiàn)在有一個(gè)更好的方法:in關(guān)鍵字中。
class Counter {
name = 'Counter';
#count = 0;
static isCounter(obj) {
return #count in obj;
}
}
const counter = new Counter();
Counter.isCounter(counter); // true
3. at()方法的數(shù)組和字符串
我們可以通過編寫[i]來訪問位置A[i]的數(shù)組的項(xiàng)目。但是,如果我是負(fù)的,并且我們想從數(shù)組的末端獲得元素怎么辦?我們可以編寫[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() 從數(shù)組的末尾開始查找一個(gè)項(xiàng)目
如何在數(shù)組中找到一個(gè)項(xiàng)目?使用find()方法。以及如何從最后找到?使用reverse()和find(),或者編寫自己的函數(shù):
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
現(xiàn)在,我們可以使用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()方法來檢查對(duì)象是否具有屬性為其直接屬性。但是使用很麻煩:
let hasOwnProperty = Object.prototype.hasOwnProperty;
if (hasOwnProperty.call(object, 'foo')) {
console.log('has property foo');
}
但是,我們現(xiàn)在可以這樣寫:
object.hasOwnProperty('foo')
請記住,JavaScript是一種動(dòng)態(tài)語言。我們可以將屬性添加到任何對(duì)象。因此,HasownProperty()可以被具有相同名稱的對(duì)象的屬性遮蔽。為了避免這種情況,我們可以使用Hasown()方法:
if (Object.hasOwn(object, 'foo')) {
console.log('has property foo');
}
6.原因是一個(gè)錯(cuò)誤的新屬性
看到這樣的錯(cuò)誤處理代碼非常常見:
await fetch('https://example.com/data.csv')
.catch((err) => {
throw new Error('failed to get: ' + err.message);
})
它的作用是將原始錯(cuò)誤用新錯(cuò)誤包裹,但是原始錯(cuò)誤丟失了。現(xiàn)在,我們可以使用原因?qū)傩源鎯?chǔ)原始錯(cuò)誤并稍后檢索:
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現(xiàn)在得到支持
Hashbang現(xiàn)在得到了支持, 我們可以直接在終端運(yùn)行nodejs腳本:
'use strict';
console.log(1);
或者:
export {};
console.log(1);
總結(jié)
以上就是我今天與你分享的7個(gè)有關(guān)ES2022的新功能,希望對(duì)你有所幫助,也希望你能從中學(xué)到新的知識(shí)。
最后,感謝你的閱讀。