大家好，我是 CUGGZ。

2023 年 1 月 11 日，2022 年度 StateOfJS 調查結果正式公布！StateOfJS 是前端生態圈中比較有影響力的且規模較大的數據調查。本文就來解讀一下 2022 年 StateOfJS 的調查結果！

2022 年 JS 狀態調查于 2022 年 11 月 21 日至 12 月 22 日進行，共收集了 39472 份問卷。此調查的目的是確定 Web 開發生態系統中即將出現的趨勢，以幫助開發人員做出技術選擇。因此，該調查的重點是預測未來幾年會發生什么，而不是分析現在流行什么，這就是為什么并不包括目前最普遍的功能或技術。

功能

JavaScript 發展很快，但似乎 JavaScript 開發人員的發展速度更快，因為許多相對較新的功能已經顯示出很高的采用率。

概述

這一部分包含語言、瀏覽器API、其他功能三部分。

外圈的大小對應的是知道某個功能的用戶總數（知道+用過的受訪者），而內圈代表實際使用過的用戶（用過的受訪者）。

在調查提到的所有功能中，受訪者的了解程度如下：

下面來詳細看看這些功能的用途以及受訪者對于這個功能的了解和使用情況！

語言

下面先來看看 JavaScript 內置的功能。

（1）Proxy

Proxy 對象用于創建一個對象的代理，從而實現基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數調用等）。

受訪者對 Proxy 的了解和使用情況如下：

（2）Promise.allSettled()

Promise.allSettled() 方法以 promise 組成的可迭代對象作為輸入，并且返回一個 Promise 實例。當輸入的所有 promise 都已敲定時（包括傳遞空的可迭代類型），返回的 promise 將兌現，并帶有描述每個 promsie 結果的對象數組。

受訪者對 Promise.allSettled() 的了解和使用情況如下：

（3）動態 import()

靜態的 import 語句用于導入由另一個模塊導出的綁定。在瀏覽器中，import 語句只能在聲明了 type="module" 的 script 的標簽中使用。而類似函數的動態 import() 不需要依賴 type="module" 的 script 標簽。如果希望按照一定的條件或者按需加載模塊的時候，動態 import() 是非常有用的。

受訪者對動態 import() 的了解和使用情況如下：

（4）類私有域

類屬性在默認情況下是公有的，但可以使用增加哈希前綴 # 的方法來定義私有類字段，這一隱秘封裝的類特性由 JavaScript 自身強制執行。

受訪者對類私有域的了解和使用情況如下：

（5）空值合并運算符（??）

空值合并運算符（??）是一個邏輯運算符，當左側的操作數為 null 或者 undefined 時，返回其右側操作數，否則返回左側操作數。與邏輯或運算符（||）不同，邏輯或運算符會在左側操作數為假值時返回右側操作數。也就是說，如果使用 || 來為某些變量設置默認值，可能會遇到意料之外的行為。比如為假值（例如，'' 或 0）時。

受訪者對空值合并運算符（??） 的了解和使用情況如下：

（6）數字分隔符

為了提高數字的可讀性，可以使用下劃線 (_, U+005F) 作為分隔符：

1_000_000_000_000
1_050.95
0b1010_0001_1000_0101
0o2_2_5_6
0xA0_B0_C0
1_000_000_000_000_000_000_000n

受訪者對數字分隔符的了解和使用情況如下：

（7）String.prototype.replaceAll()

replaceAll() 方法返回一個新字符串，新字符串所有滿足 pattern 的部分都已被 replacement 替換。pattern可以是一個字符串或一個 RegExp， replacement 可以是一個字符串或一個在每次匹配被調用的函數，該方法不會改變原始字符串。

受訪者對 replaceAll() 的了解和使用情況如下：

（8）String.prototype.matchAll()

matchAll() 方法返回一個包含所有匹配正則表達式的結果及分組捕獲組的迭代器。

受訪者對 matchAll() 的了解和使用情況如下：

（9）邏輯與賦值運算符（&&=）

邏輯與賦值 (x &&= y) 運算符僅在 x 為真時才賦值。

受訪者對邏輯與賦值運算符的了解和使用情況如下：

（10）Promise.any()

Promise.any() 接收一個由 Promise 所組成的可迭代對象，該方法會返回一個新的 promise，一旦可迭代對象內的任意一個 promise 變成了兌現狀態，那么由該方法所返回的 promise 就會變成兌現狀態，并且它的兌現值就是可迭代對象內的首先兌現的 promise 的兌現值。如果可迭代對象內的 promise 最終都沒有兌現（即所有 promise 都被拒絕了），那么該方法所返回的 promise 就會變成拒絕狀態，并且它的拒因會是一個 AggregateError 實例，這是 Error 的子類，用于把單一的錯誤集合在一起。

注意：Promise.any() 方法依然是實驗性的，尚未被所有的瀏覽器完全支持。它當前處于 TC39 第四階段草案（Stage 4）

受訪者對 Promise.any() 的了解和使用情況如下：

（11）Array.prototype.at()

at() 方法接收一個整數值并返回該索引對應的元素，允許正數和負數。負整數從數組中的最后一個元素開始倒數。

受訪者對 at() 的了解和使用情況如下：

（12）頂層 await

在模塊的頂層，可以單獨使用關鍵字 await（異步函數的外面）。也就是說一個模塊如果包含用了 await 的子模塊，該模塊就會等待該子模塊，這一過程并不會阻塞其它子模塊。

受訪者對頂層 await 的了解和使用情況如下：

（13）Temporal

Temporal 為 ECMAScript 語言帶來了現代日期/時間 API。其具有以下特點：

• 為日期和時間計算提供易于使用的 API
• 對所有時區的一流支持，包括 DST 安全算法
• 只處理代表固定日期和時間的對象
• 解析嚴格指定的字符串格式
• 支持非公歷

受訪者對 Temporal 的了解和使用情況如下：

（14）Array.prototype.findLast()

findLast() 方法返回數組中滿足提供的測試函數條件的最后一個元素的值。如果沒有找到對應元素，則返回 undefined。

受訪者對 findLast() 的了解和使用情況如下：

（15）Error.prototype.cause

Error 實例的 cause 數據屬性用來指示錯誤的具體原始原因。使用更具體或有用的錯誤消息捕獲并重新拋出錯誤時使用它，以便仍然可以訪問原始錯誤。

受訪者對 Error.prototype.cause 的了解和使用情況如下：

（16）Object.hasOwn()

如果指定的對象自身有指定的屬性，則靜態方法 Object.hasOwn() 返回 true。如果屬性是繼承的或者不存在，該方法返回 false。Object.hasOwn() 旨在取代 Object.hasOwnProperty()。

受訪者對 Object.hasOwn() 的了解和使用情況如下：

（17）正則表達式匹配索引

受訪者對正則表達式匹配索引的了解和使用情況如下：

瀏覽器 API

接下來看看瀏覽器提供的功能。

（1）Service Worker API

Service workers 本質上充當 Web 應用程序、瀏覽器與網絡（可用時）之間的代理服務器。這個 API 旨在創建有效的離線體驗，它會攔截網絡請求并根據網絡是否可用來采取適當的動作、更新來自服務器的的資源。它還提供入口以推送通知和訪問后臺同步 API。

受訪者對 Service Worker API 的了解和使用情況如下：

（2）Intl

Intl 對象是 ECMAScript 國際化 API 的一個命名空間，它提供了精確的字符串對比、數字格式化，和日期時間格式化。Collator，NumberFormat 和 DateTimeFormat 對象的構造函數是 Intl 對象的屬性。

受訪者對 Intl 的了解和使用情況如下：

（3）WebGL

WebGL 使得在支持 HTML 的 canvas 標簽的瀏覽器中，不需要安裝任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中進行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 寫的控制代碼，以及在圖形處理單元中執行的著色代碼。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和網頁其他部分或者網頁背景結合起來。

受訪者對 WebGL 的了解和使用情況如下：

（4）Web Animations API

Web Animations API 將瀏覽器動畫引擎向開發者打開，并由 JavaScript 進行操作。這些 API 被設計成 CSS Animations and CSS Transitions的接口，未來會對這些 API 做補充以豐富更多的功能。通過 Web 動畫 API，我們可以將交互式動畫從樣式表移動到 JavaScript，將表現與行為分開。

受訪者對 Web Animations API 的了解和使用情況如下：

（5）WebRTC API

WebRTC 是一項實時通訊技術，它允許網絡應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點（Peer-to-Peer）的連接，實現視頻流和（或）音頻流或者其他任意數據的傳輸。WebRTC 包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下，創建點對點（Peer-to-Peer）的數據分享和電話會議成為可能。

受訪者對 WebRTC API 的了解和使用情況如下：

（6）Web Speech API

Web Speech API 能夠將語音數據合并到 Web 應用程序中。Web Speech API 有兩個部分：SpeechSynthesis 語音合成（文本到語音 TTS）和 SpeechRecognition 語音識別（異步語音識別）。

受訪者對 Web Speech API 的了解和使用情況如下：

（7）WebSocket API

WebSockets 是一種先進的技術。它可以在用戶的瀏覽器和服務器之間打開交互式通信會話。使用此 API，可以向服務器發送消息并接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。

受訪者對 WebSocket API 的了解和使用情況如下：

（8）Web Components

Web Components 是一套不同的技術，用于創建可重用的定制元素（它們的功能封裝在代碼之外）并且在 web 應用中使用它們。

受訪者對 Web Components 的了解和使用情況如下：

（9）Shadow DOM

Web components 的一個重要屬性是封裝——可以將 HTML 結構、樣式和行為隱藏起來，并與頁面上的其他代碼相隔離，保證不同的部分不會混在一起，可使代碼更加干凈、整潔。其中，Shadow DOM 接口是關鍵所在，它可以將一個隱藏的、獨立的 DOM 附加到一個元素上。

受訪者對 Shadow DOM 的了解和使用情況如下：

（10）頁面可見性 API

使用選項卡式瀏覽，任何給定網頁都有可能在后臺，因此對用戶不可見。頁面可見性 API 提供了可以觀察的事件，以便了解文檔何時可見或隱藏，以及查看頁面當前可見性狀態的功能。該 API 對于節省資源和提高性能特別有用，它使頁面在文檔不可見時避免執行不必要的任務。

受訪者對頁面可見性 API 的了解和使用情況如下：

（11）Broadcast Channel API

Broadcast Channel API 可以實現同源下瀏覽器不同窗口，Tab 頁，frame 或者 iframe 下的瀏覽器上下文 (通常是同一個網站下不同的頁面) 之間的簡單通訊。

受訪者對 Broadcast Channel API 的了解和使用情況如下：

（12）地理位置 API

地理位置 API（Geolocation API）允許用戶向 web 應用程序提供他們的位置。出于隱私考慮，報告地理位置前會先請求用戶許可。

受訪者對地理位置 API 的了解和使用情況如下：

（13）文件系統訪問 API

文件系統訪問 API 用于讀取、寫入和文件管理功能。此功能僅在安全上下文 (HTTPS) 中可用，在某些或所有支持的瀏覽器中可用。

受訪者對文件系統訪問 API 的了解和使用情況如下：

（14）Web Share API

Web Share API 提供了一種機制，用于將文本、鏈接、文件和其他內容共享到用戶選擇的任意共享目標。

受訪者對 Web Share API 的了解和使用情況如下：

（15）WebXR Device API

WebXR 是一組支持將渲染 3D 場景用來呈現虛擬世界（虛擬現實，也稱作 VR）或將圖形圖像添加到現實世界（增強現實，也稱作 AR）的標準。WebXR Devic API 實現了 WebXR 功能集的核心，管理輸出設備的選擇，以適當的幀速率將 3D 場景呈現給所選設備，并管理使用輸入控制器創建的運動矢量。

受訪者對 WebXR Device API 的了解和使用情況如下：

其他功能

（1）漸進式 Web 應用（PWA）

PWA（Progressive Web Apps，漸進式 Web 應用）運用現代的 Web API 以及傳統的漸進式增強策略來創建跨平臺 Web 應用。這些應用無處不在、功能豐富，使其具有與原生應用相同的用戶體驗優勢。

受訪者對漸進式 Web 應用（PWA）的了解和使用情況如下：

（2）WebAssembly

WebAssembly 是一種新的編碼方式，可以在現代的網絡瀏覽器中運行 － 它是一種低級的類匯編語言，具有緊湊的二進制格式，可以接近原生的性能運行，并為諸如 C / C ++等語言提供一個編譯目標，以便它們可以在 Web 上運行。它也被設計為可以與 JavaScript 共存，允許兩者一起工作。

受訪者對 WebAssembly 的了解和使用情況如下：

庫

概述

以下每條線都是從 2016 年到 2020 年，點越高代表該技術被更多人使用，點越靠右代表越多的人想要學習；或者已經使用過并且會再次使用它。

下表是根據庫的保留率（將再次使用圖書館的用戶百分比）對庫進行排名的結果：

前端框架

下面來看看隨著時間的推移，熱門 JavaScript 框架的保留率、興趣率、使用率和認知率。

認知度低于 10% 的技術不包括在內。每個比率定義如下：

• 保留率：會再次使用/（會再次使用+不會再次使用）
• 興趣率：想學/（想學+沒興趣）
• 使用率：（會再次使用+不會再次使用）/總計
• 認知率：（總計 - 從未聽說過）/總計

保留率如下，可以看到React和Vue的保留率都在逐年下降：

興趣率：

使用率如下，近四年前端框架的使用率趨于穩定，其中 React 一直處于領先地位：

認知率：

隨著時間的推移，受訪者對所調查技術的看法：

下表在中心軸的兩側劃分了正面（“想學習”、“會再次使用”）和負面（“不感興趣”、“不會再次使用”）體驗，其中條形粗細表示了解某項技術的受訪者數量：

用戶對其他前端框架的使用情況如下，可以看到，使用 JQuery 的用戶僅占受訪者的1.9%：

受訪者對前端框架現狀的滿意度如下：

渲染框架

下面來看看隨著時間的推移，熱門渲染框架的保留率、興趣率、使用率和認知率。

保留率：

興趣率：

使用率：

認知率：

隨著時間的推移，受訪者對所調查技術的看法：

下表在中心軸的兩側劃分了正面（“想學習”、“會再次使用”）和負面（“不感興趣”、“不會再次使用”）體驗，其中條形粗細表示了解某項技術的受訪者數量：

用戶對其他渲染框架的使用情況如下：

受訪者對渲染框架現狀的滿意度如下：

測試工具

下面來看看隨著時間的推移，熱門測試工具的保留率、興趣率、使用率和認知率。

保留率：

興趣率：

使用率：

認知率：

隨著時間的推移，受訪者對所調查技術的看法：

下表在中心軸的兩側劃分了正面（“想學習”、“會再次使用”）和負面（“不感興趣”、“不會再次使用”）體驗，其中條形粗細表示了解某項技術的受訪者數量：

用戶對其他測試工具的使用情況如下：

受訪者對測試工具現狀的滿意度如下：

移動端&桌面端

下面來看看隨著時間的推移，熱門移動端&桌面端框架/庫的保留率、興趣率、使用率和認知率。

保留率：

興趣率：

使用率：

認知率：

隨著時間的推移，受訪者對所調查技術的看法：

下表在中心軸的兩側劃分了正面（“想學習”、“會再次使用”）和負面（“不感興趣”、“不會再次使用”）體驗，其中條形粗細表示了解某項技術的受訪者數量：

用戶對其他移動端&桌面端庫的使用情況如下：

受訪者對移動端&桌面端框架/庫現狀的滿意度如下：

構建工具

下面來看看隨著時間的推移，熱門構建工具的保留率、興趣率、使用率和認知率。

保留率如下，可以看到 webpack 的保留率在逐年下降，2022年只剩下不到70%，而V ite 的保留率接近100%：

興趣率：

使用率如下，雖然webpack的保留率在逐年下降，但仍是使用率最多的構建工具。Vite 的使用率較去年有很大的提升，未來發展空間很大：

認知率：

隨著時間的推移，受訪者對所調查技術的看法：

下表在中心軸的兩側劃分了正面（“想學習”、“會再次使用”）和負面（“不感興趣”、“不會再次使用”）體驗，其中條形粗細表示了解某項技術的受訪者數量：

其他工具用戶使用情況如下：

受訪者對構建工具現狀的滿意度如下：

Monorepos 工具

下面來看看隨著時間的推移，熱門 Monorepos 工具的保留率、興趣率、使用率和認知率。

保留率：

興趣率：

使用率：

認知率：

隨著時間的推移，受訪者對所調查技術的看法：

下表在中心軸的兩側劃分了正面（“想學習”、“會再次使用”）和負面（“不感興趣”、“不會再次使用”）體驗，其中條形粗細表示了解某項技術的受訪者數量：

用戶對其他 Monorepos 工具的使用情況如下：

受訪者對 Monorepos 工具現狀的滿意度如下：

其他工具

受訪者經常使用的庫中，最受歡迎的就是 Lodash，超過 63% 的用戶使用過 Lodash：

常用的時間處理庫中，超過一半的用戶使用 Moment，data-fns 緊隨其后。

常用的數據可視化庫中，使用最多的就是 Chart.js 和 D3，分別占比 58.6% 和 47.4%。

常用的數據獲取庫中，Axios 遙遙領先于其他庫，超過80%的用戶使用 Axios。

常用的后端框架中，Express 領先于其他庫，超過87%的用戶使用 Express。

常用的實用工具庫中，nvm 和 babel 是用的最多的工具庫：

Node.js和瀏覽器依舊是最常用的JavaScript運行時：

常用的 JavaScript 風格中，使用最多的就是 TypeScript。近 99% 的受訪者使用 TypeScript：

除了前端語言，用戶使用過的其他語言中，使用最多的就是 Python，有超過 40% 的用戶使用Python：

用法

下面來看看受訪者都是如何使用JavaScript的。

下面是受訪者使用 JavaScript 或 TypeScript 的占比情況，可以看到，超過73%的用戶都使用 TypeScript，可以預見未來 TypeScript 的使用率會越來越高。

下面是用戶使用 JavaScript 的用途，98%的受訪者使用JavaScript編寫前端應用，還有65%的受訪者使用JavaScript編寫后端應用。

在開發中使用的模式分布情況如下，可以看到，超過90%的應用都是單頁應用，有超過一半的項目使用了服務端渲染（SSR）：

意見

JavaScript 正朝著正確的方向發展？可以看到，近幾年每種意見都趨于穩定，超過76%的用戶認同JavaScript正在朝著正確的方向發展。

現在構建 JavaScript 應用過于復雜？

JavaScript 生態系統變化太快？

JavaScript 的前三大痛點：代碼架構、依賴管理、狀態管理。

JavaScript 目前缺少的三大功能：靜態類型、標準庫、更好的日期管理。

受訪者對目前 Web 技術的整體滿意度如下：

調查結果：https://2022.stateofjs.com/en-US/