使用#來定義私有屬性
#count
是私有變數,不能通過 IncreasingCounter
例項訪問
class IncreasingCounter {
#count = 0;
get value(){
console.log( ' Getting the current value!');
return this.#count++
}
}
複製程式碼
子類可省略super(args);
class Animal {
constructor(name) {
this.name = name;
}
}
class Cat extends Animal {
constructor(name) {
super(name);
this.likesBaths =false;
}
meow() {
console.log('Meow!');
}
}
複製程式碼
super()
這種在子類建構函式中模板式的寫法可以不用了
class Cat extends Animal {
likesBaths = false;
meow() {
console.log('Meow!');
}
}
複製程式碼
字串新增 matchAll 方法
在 matchAll 出現之前,通過在迴圈中呼叫regexp.exec
或string.match
來獲取所有匹配項資訊
const regexp = RegExp('fo*','g');
const str = 'table football, foosball';
while ((matches = regexp.exec(str)) !== null) {
console.log(matches[0]);
}
複製程式碼
const str = 'table football, foosball';
const regex = /fo*/gu ;
for (const match of str . match( regex)) {
console . log(match)
};
複製程式碼
使用string.matchAll
const regexp = RegExp('foo*','g');
const str = 'table football, foosball';
let matches = str.matchAll(regexp);
for (const match of matches) {
console.log(match);
}
複製程式碼
使用matchAll
的另外一個亮點是更好地獲取分組捕獲。因為當使用match()和/g標誌方式獲取匹配資訊時,分組捕獲會被忽略:
const string = 'Favorite GitHub repos: tc39/ecma262 v8/v8.dev';
const regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)) {
console.log(`${match[0]} at ${match. index} with '${match.input}'`);
console.log(`owner: ${match.groups.owner}`);
console.log(`repo: ${match.groups.repo}`);
}
複製程式碼
BigInt進行大數字計算
大資料字,如 1234567890123456789 * 123
計算不了?js不存在了
1234567890123456789n * 123n;
//151851850485185185047n V
複製程式碼
array.flat和array.flatMap
// Flatten one level :
const array = [1, [2, [3]]];
array. flat( ) ;// [1, 2, [3] ]
//Flatten recursively until the array contains no
// more nested arrays :
array . flat( Infinity) ;// [1,2,3]
//flatMap
const duplicate = (x) => [x, x] ;
[2, 3, 4] . map( duplicate) . flat();// [2, 2, 3,3, 4, 4]
// use flatMap will be more simple
[2, 3, 4]. flatMap( duplicate) ;// [2,2,3,3,4,4]
複製程式碼
array.sort穩定排序
對陣列的元素進行排序,並返回陣列。排序演算法現在是穩定的了!
Object.fromEntries
const object = {x:42,y:50};
const entries = Object . entries( object) ;// [['x', 42], ['y', 50]]
const result = Object. fromEntries(entries) ;// {x:42,y:50}
const map=new Map(entries);
//Convert the map back into an object;
const objectCopy=Object.fromEntries(map);
複製程式碼
獲取全域性物件
下面的程式碼可以不需要了
const getGlobalThis = ( ) =>
{
if ( typeof self !== ' undefined' ) return self ;
if ( typeof window !== ' undefined') return window ;
if ( typeof global !=='undefined') return global ;
if ( typeof this!=='undefined') return this ;
throw new Error('Unable to locate global object') ;
};
複製程式碼
使用這個吧
const theGlobalThis = globalThis;
複製程式碼
在最外層使用await
之前,await必須要放在async函式中執行,如果要在最外層使用,得像這樣
//在最外層執行await
( async function() {
const result = await doSomethingAsync() ;
doSomethingElse( );
})();
複製程式碼
現在不用了
const result = await doSomethingAsync() ;
doSomethingElse( );
複製程式碼
增Promise.allSettled,Promise.any
Promise.all
和Promise.race
會因為reject中斷,如果不希望這樣,可以使用Promise.allSettled
,Promise.any
替代。
WeakRef
WeakMap
僅支援 object 型別作為 Key 的場景,·並且不能遍歷。WeakRef
封裝的物件將為弱引用,可以將這個物件賦值給其它變數。如睛,ref為WeakMap對像,當其封裝的物件不存在時,ref也會被回收;
const cache =new Map();
function getImageCached(name ) {
letref = cache.get(name);
if (ref !== undefined) {
const deref = ref.deref();
if (deref !== undefined) return deref;
const image = performExpensiveOperation(name);
ref = new WeakRef(image);
cache.set(name, ref);
return image;
}
}
複製程式碼
那儲存WeakMap物件的變數怎麼回收呢,解決方案是引入一個新的 API FinalizationGroup()
。在FinalizationGroup
上註冊一個回撥函式,用來在 GC 觸發時從快取中刪除這些變數。
const cache = new Map();
const finalizationGroup = new FinalizationGroup((iterator) => {
for (const name of iterator) {
const ref = cache.get(name);
if (ref !== undefined && ref.deref() === undefined) {
cache.delete(name);
}
}
});
複製程式碼
本地化介面 Intl
Intl
是 ECMAScript 國際化 API 的一個名稱空間,它提供了精確的字串對比、數字格式化,和日期時間格式化。
可參考這裡:
developer.mozilla.org/zh-CN/docs/…
特別提到了Intl.RelativeTimeFormat
,感受下吧
var rtf1 = new Intl.RelativeTimeFormat('zh', { style: 'narrow' });
console.log(rtf1.format(3, 'quarter'));
//"3個季度後"
console.log(rtf1.format(-1, 'day'));
//"1天前"
var rtf2 = new Intl.RelativeTimeFormat('zh', { numeric: 'auto' });
console.log(rtf2.format(2, 'day'));
//"後天"
複製程式碼