Google I/O 2019上說起的Javascript新特性

使用#來定義私有屬性

#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'));
//"後天"
複製代碼