2020年是一個(gè)不平凡的一年，但已經(jīng)過去了，總結(jié)過去，展望未來！

Javascript 在過去一年里整體上在設(shè)法向前發(fā)展。得益于像可選鏈（Optional Chaining）和空值合并運(yùn)算符（Nullish Coalescing）這樣的新特性，語言本身在不斷改進(jìn)，而 TypeScript 的廣泛使用將靜態(tài)類型化普及到了一個(gè)新的高度。

2021年1月14日，Javascript 2020趨勢(shì)調(diào)查報(bào)告發(fā)布了。調(diào)查結(jié)果來自137個(gè)國(guó)家的23,765名開發(fā)者，涵蓋了開發(fā)者對(duì)Javascript特性、技術(shù)、工具等的使用和想法。下面來一起看看這份報(bào)告，并加深對(duì)Javascript的認(rèn)識(shí)，在新的一年里提升一個(gè)檔次。

2021年Javascript工具

去年，最常用的技術(shù)沒有發(fā)生太大的變化。TypeScript仍然是最常用的Javascript風(fēng)格，React仍然是最常用的前端庫，Express仍然是最常用的后端庫。如果你想成為一名Web工程師，那么這些絕對(duì)是應(yīng)該首先學(xué)習(xí)的技術(shù)。

但是，談到開發(fā)人員在2020年最喜歡的技術(shù)時(shí)，看到了許多新的競(jìng)選者，可能也代表著一種未來趨勢(shì)。

前端框架：Svelte

Svelte取代了React，成為最受歡迎的前端庫。與React必須在最終應(yīng)用程序中的用戶代碼之上發(fā)布React庫代碼不同，Svelte是一個(gè)編譯器，可將用戶代碼編譯為優(yōu)化的原生Javascript。結(jié)果是包的大小更小，性能更快。隨著Sapper（Svelte's Next.js）和Svelte Native（Svelte's React Native）的引入，Svelte的生態(tài)系統(tǒng)正在迅速成熟，使其成為React-Vue-Angular主導(dǎo)地位的有力競(jìng)爭(zhēng)者。

后端框架：Next.js

Next.js取代Express成為最受歡迎的后端框架。 可能有人認(rèn)為它們不屬于同一類別，因?yàn)樗鼈兲幚聿煌膶?shí)例，但對(duì)于Next.js在報(bào)告中居首位沒什么意外。它是一個(gè)優(yōu)秀的服務(wù)器端呈現(xiàn)框架和靜態(tài)站點(diǎn)生成器。此外，為Next.js量身定制的部署平臺(tái)Vercel也對(duì)Next.js進(jìn)行了補(bǔ)充，允許非常容易地交付代碼。

構(gòu)建工具：esbuild和Snowpack

esbuild和Snowpack取代了webpack，成為最受歡迎的構(gòu)建工具。esbuild是用Golang編寫的構(gòu)建工具，因此其性能比webpack快幾個(gè)數(shù)量級(jí)。

另一方面，Snowpack引入了一種只構(gòu)建每個(gè)ES模塊一次的新方法。在那之后，Snowpack只構(gòu)建已經(jīng)改變的ES模塊。相比之下，像webpack這樣的傳統(tǒng)構(gòu)建工具在每次進(jìn)行更改時(shí)都會(huì)構(gòu)建整個(gè)項(xiàng)目。esbuild和Snowpack盡管使用的方法不同，但都極大地減少了開發(fā)和部署時(shí)間。

跨平臺(tái)框架：Electron和Capacitor

Electron 和 React Native 是跨終端跨平臺(tái)應(yīng)用框架，在2020年，新的解決方案 Capacitor 也開始掀起波瀾。

Javascript新特征

調(diào)查還顯示，新的Javascript功能的使用率較低，例如空值合并運(yùn)算符（45.3％），可選鏈操作符（66.7％）和Promise.allSettled()（14.7％）。由于所有主流瀏覽器和Node.js 14+都支持它們，現(xiàn)在可能是將它們合并到代碼中的好時(shí)機(jī)。

空值合并運(yùn)算符

空值合并操作符（??）是一個(gè)邏輯操作符，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。對(duì)于現(xiàn)有的Javascript來說是個(gè)不錯(cuò)的補(bǔ)充，優(yōu)化并統(tǒng)一了對(duì)null 或者 undefined的判斷標(biāo)準(zhǔn)。

const foo = null ?? "default string";
console.log(foo);

const baz = 0 ?? 42;
console.log(baz);

輸出結(jié)果：

"default string"
0

可選鏈操作符

可選鏈操作符 ?.允許讀取位于連接對(duì)象鏈深處的屬性的值，而不必明確驗(yàn)證鏈中的每個(gè)引用是否有效。?. 操作符的功能類似于. 鏈?zhǔn)讲僮鞣煌幵谟冢谝脼榭?nullish ) (null 或者 undefined) 的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時(shí)，如果給定的函數(shù)不存在，則返回 undefined。

const myinfo = {
    account: {
        name: "DevPoint",
      	address:{
          city:{
            code:1101,
            name:"Shenzhen"
          }
        }
    },
};
console.log(myinfo?.account?.name); // print "DevPoint"
console.log(myinfo?.account?.address?.province?.code);  // print undefined
console.log(myinfo.account.address.province.code); // error

Promise.allSettled()

該Promise.allSettled()方法返回一個(gè)在所有給定的promise都已經(jīng)fulfilled或rejected后的promise，并帶有一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象表示對(duì)應(yīng)的promise結(jié)果。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
    setTimeout(reject, 100, "foo")
);
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) =>
    results.forEach((result) => console.log(result.status))
);

// expected output:
// "fulfilled"
// "rejected"

盡管上述新的特征可以快速添加到代碼中，但其他ES2020新功能也同樣給到驚喜，例如BigInt和動(dòng)態(tài)導(dǎo)入。

BigInt

BigInt 是一種內(nèi)置對(duì)象，它提供了一種方法來表示大于以下的整數(shù)

253−1253−1

這原本是 Javascript中可以用 Number 表示的最大數(shù)字。BigInt 可以表示任意大的整數(shù)。

動(dòng)態(tài)import

標(biāo)準(zhǔn)用法的import導(dǎo)入的模塊是靜態(tài)的，會(huì)使所有被導(dǎo)入的模塊，在加載時(shí)就被編譯（無法做到按需編譯，降低首頁加載速度）。有些場(chǎng)景中，可能希望根據(jù)條件導(dǎo)入模塊或者按需導(dǎo)入模塊，這時(shí)可以使用動(dòng)態(tài)import代替靜態(tài)導(dǎo)入。下面的是需要使用動(dòng)態(tài)導(dǎo)入的場(chǎng)景：

• 當(dāng)靜態(tài)導(dǎo)入的模塊很明顯的降低了代碼的加載速度且被使用的可能性很低，或者并不需要馬上使用它。
• 當(dāng)靜態(tài)導(dǎo)入的模塊很明顯的占用了大量系統(tǒng)內(nèi)存且被使用的可能性很低。
• 當(dāng)被導(dǎo)入的模塊，在加載時(shí)并不存在，需要異步獲取
• 當(dāng)導(dǎo)入模塊的說明符，需要?jiǎng)討B(tài)構(gòu)建。（靜態(tài)導(dǎo)入只能使用靜態(tài)說明符）
• 當(dāng)被導(dǎo)入的模塊有副作用（這里說的副作用，可以理解為模塊中會(huì)直接運(yùn)行的代碼），這些副作用只有在觸發(fā)了某些條件才被需要時(shí)。（原則上來說，模塊不能有副作用，但是很多時(shí)候，無法控制你所依賴的模塊的內(nèi)容）

請(qǐng)不要濫用動(dòng)態(tài)導(dǎo)入（只有在必要情況下采用）。靜態(tài)框架能更好的初始化依賴，而且更有利于靜態(tài)分析工具發(fā)揮作用

結(jié)論

2020年，Javascript庫領(lǐng)域發(fā)生了巨大變化。諸如esbuild之類的新手很快占據(jù)了主導(dǎo)地位。也看到像Svelte這樣冷落了一段時(shí)間的項(xiàng)目最終獲得了關(guān)注。

ES2020還引入了一些期待已久的Javascript新特征，解決了Javascript開發(fā)人員的許多難題，同樣提高了代碼的可讀性。

對(duì)于Javascript開發(fā)人員而言，2020年雖不平凡，但在很多新的領(lǐng)域是多么激動(dòng)人心的一年！