ES 2020 新特性

在 ES 2020 中，有一些非常實用的新特性，接下來，就跟我一起看看在新版本中有哪些新特性在平時的開發中可以用到。

可選鏈式操作符

大家平常在工作中寫代碼的時候，有時候會寫這樣的代碼：

if (a && a. b && a.b.c) {
console.log(a.b.c);
}

因爲我們不確定a或b是否存在，那麼獲取c就會報錯，這時候可選鏈式調用就非常有用了。

我們可以使用可選鏈式操作符 ?.，如果沒有值，則返回undefined 而不是直接報錯，就像下面這樣：

console.log(a?.b?.c || '');

再例如：讀取一個被連接對象的深層次的屬性的值

const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80號'
        }
    }
}

ES5寫法：

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()

ES6寫法：

const street = user?.address?.street
const num = user?.address?.getNum?.()

空值合併

控制合併運算符爲 ??，它的作用是當左側操作數爲null或者 undefined時，則返回右側操作數，我們來看實際的例子：

null ?? 7              // 7

有些同學可能就要問了，這東西和||有什麼區別？其實||操作符還是必須的，這是這兩者的應用場景不一樣，比如下面的情況：

'' ?? 7; // ''
'' || 7; // 7

也就是說 ?? 只有當左邊是null和 undefined 時，纔會取右邊的值，而||則是左邊爲假時，就會取右邊的值，比較典型的就是 0 和空字符串了。

動態引入

之前我們可以通過 webpack 來使用動態引入，現在這個特性原生就支持了。

import('a/b.js').then(b => {
console.log(b);
});

但是對於大多數開發者來說是沒什麼感知的，畢竟大多數人還是用 webpack 來打包的。

Promise.allSettled

Promise.allSettled返回一個包含結果和值的對象數組，不論執行每一個 Promise時是成功還是失敗，它都會全部執行完成，然後返回結果，下面就是和 Promise.all的對比。

const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);
/**
*[{status: "fulfilled", value: 1}
* {status: "rejected", reason: 2}
* {status: "fulfilled", value: 3}]
*/
Promise.allSettled([p1, p2, p3]).then(result => console.log(result));
/**
* error 2
*/
Promise.all([p1, p2, p3]).catch(error => console.log('error', error));

其他一些特性

…