JavaScript 2021年度報(bào)告新鮮出爐

前言

由于一些原因尸闸，一年一度 JavaScript 年度調(diào)查報(bào)告被推遲到本月（2022 年 2 月）

本月JavaScript 2021年度報(bào)告新鮮出爐背桐，本次調(diào)查共采訪了 16,085 名月帝、來自 148+ 個(gè)國家的開發(fā)人員

通過該報(bào)告，可以很好的了解 Web 開發(fā)生態(tài)中即將出現(xiàn)的趨勢(shì)眶俩，以幫助我們更好的做出技術(shù)選型

部分看點(diǎn)

??運(yùn)算符是使用度增長最大的特性
Vite 以極高的滿意度97.4%位居滿意度榜首
三大框架的滿意度恩袱，Vue和React同為第二梯隊(duì)，Angular墊底
esbuild是使用率同比增長最多的技術(shù)
TypeScript 是迄今為止最流行的擴(kuò)展 JS 的編程語言，把 Elm 和Flow遠(yuǎn)遠(yuǎn)的甩在了第二和第三名
老牌工具庫如 Axios谦去、Lodash慷丽、Moment 仍然是最受歡迎的工具庫

特性

下面我們從特性開始看

概覽

特性分為以下3類：

JavaScript語言特性
瀏覽器API
其他特性

使用情況概覽如下：

[圖片上傳失敗...(image-67bb9a-1646005867416)]

圖中，外圈的尺寸代表了了解這個(gè)特性的用戶數(shù)量, 內(nèi)圈的尺寸代表了實(shí)際使用這個(gè)特性的用戶數(shù)量

可以看到鳄哭，許多相對(duì)較新的功能已經(jīng)顯示出很高的采用率

語言特性

Proxy

簡(jiǎn)介

Proxy 是代理的意思要糊，本質(zhì)是一個(gè)構(gòu)造函數(shù)，通過該構(gòu)造函數(shù)構(gòu)造對(duì)象時(shí)接受兩個(gè)參數(shù)：target和handler

target表示的就是要攔截（代理）的目標(biāo)對(duì)象
handler是用來定制攔截行為

作用是在目標(biāo)對(duì)象之前架設(shè)了一層“攔截”妆丘，當(dāng)外界對(duì)該對(duì)象的訪問锄俄，都必須先通過這層攔截，有了這種攔截機(jī)制勺拣，當(dāng)外界的訪問我們可以對(duì)進(jìn)行一些操作

使用情況

Proxy 的使用情況如下：

[圖片上傳失敗...(image-1591ef-1646005867416)]

可以看到奶赠，知道它的人并使用它的人在逐年增多，2021 年已經(jīng)有 26.1% 的人在使用它了

Promise.allSettled()

簡(jiǎn)介

此方法 ES2020 引入药有，可接受一組 Promise 實(shí)例作為參數(shù)毅戈，包裝成一個(gè)新的 Promise 實(shí)例

與Promise.all()有點(diǎn)像，但不同的是：

Promise.allSettled() 只有等到所有這些參數(shù)實(shí)例都返回結(jié)果（不管是 fulfilled 還是 rejected ）包裝實(shí)例才會(huì)結(jié)束

因此如果想知道每個(gè)promise的結(jié)果愤惰，我們可以使用 Promise.allSettled()苇经，而Promise.all()更適合彼此相互依賴或者在其中任何一個(gè)reject時(shí)立即結(jié)束的情景

使用情況

[圖片上傳失敗...(image-f2486b-1646005867416)]

2021 年有 19% 的人使用它

動(dòng)態(tài)引入

簡(jiǎn)介

ES2020提案引入import()函數(shù)，用于支持動(dòng)態(tài)引入模塊宦言，由于是個(gè)函數(shù)扇单，可用于任何地方

使用場(chǎng)景：按需加載、條件加載奠旺、動(dòng)態(tài)的模塊路徑等等

使用情況

[圖片上傳失敗...(image-7d01f3-1646005867416)]

動(dòng)態(tài)引入雖然是很新的特性蜘澜，但一出來就得到大家的喜愛，在 2021 年使用率已經(jīng)相當(dāng)?shù)母吡耍?code>48.9%

??運(yùn)算符

簡(jiǎn)介

??運(yùn)算符是 ES2020 引入响疚，也被稱為null判斷運(yùn)算符( Nullish coalescing operator)

它的行為類似||但更嚴(yán)鄙信，它必須運(yùn)算符左側(cè)的值為null或undefined時(shí)，才會(huì)返回右側(cè)的值忿晕，而||運(yùn)算符左邊是空字符串或false或0装诡，都會(huì)返回后側(cè)的值

使用情況

[圖片上傳失敗...(image-76e761-1646005867416)]

可以看到它的使用率已經(jīng)高達(dá)67.2%，這應(yīng)該是本次調(diào)查的語言特性使用率排名第2的特性了

?.運(yùn)算符

?.也被稱為鏈判斷運(yùn)算符（optional chaining operator）

直接在鏈?zhǔn)秸{(diào)用的時(shí)候判斷杏糙，判斷左側(cè)的對(duì)象是否為null或undefined慎王，如果是的蚓土，就不再往下運(yùn)算宏侍，而是返回undefined。比如：

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

鏈判斷運(yùn)算符有三種用法蜀漆。

obj?.prop 對(duì)象屬性
obj?.[expr] 同上
func?.(...args) 函數(shù)或?qū)ο蠓椒ǖ恼{(diào)用

使用情況

[圖片上傳失敗...(image-937ccb-1646005867416)]

這是?.運(yùn)算符是所有特性中使用率第1的特性了谅河，高達(dá)85.8%

私有屬性

簡(jiǎn)介

默認(rèn)情況，類的成員（屬性和方法）都是public，但我們可以通過添加前綴 # 的方式绷耍，將類的成員變成私有的

基礎(chǔ)語法：

class ClassWithPrivate {
  #privateField;
}
class ClassWithPrivate {
  #privateMethod() {
    return 'hello world';
  }
}

凡被#修飾過的類成員吐限，都不能被子類繼承

使用情況

[圖片上傳失敗...(image-1a2f29-1646005867416)]

可以看到，也有 20% 的使用率褂始，還不錯(cuò)

BigInt

簡(jiǎn)介

BigInt是后來新增的基本數(shù)據(jù)類型诸典，跟Number類似

但 BigInt用于當(dāng)整數(shù)值大于Number數(shù)據(jù)類型所支持的范圍時(shí)，這種數(shù)據(jù)類型允許我們安全地對(duì)大整數(shù)執(zhí)行算術(shù)操作崎苗，而不需要使用其他庫

創(chuàng)建BigInt類型的方式有兩種方式

只需在整數(shù)的末尾追加n狐粱；

let b1 = 9999999999999999n

使用BigInt()函數(shù)；

let b2 = BigInt(9999999999999999)

需要注意胆数，不能使用Number和BigInt操作數(shù)的混合執(zhí)行算術(shù)運(yùn)算肌蜻，否則會(huì)報(bào)TypeError

使用情況

[圖片上傳失敗...(image-e01fb6-1646005867416)]

可以看到80%以上的人都知道BigInt，可能使用場(chǎng)景不是特別多必尼，只有16.5%的人使用

String.prototype.replaceAll()

簡(jiǎn)介

String.prototype.replaceAll()用法與String.prototype.replace()類似

但是replace僅替換第一次出現(xiàn)的子字符串蒋搜，而replaceAll會(huì)替換所有

例如：

console.log('aaa'.replace('a','A')) //Aaa
console.log('aaa'.replaceAll('a','A')) //AAA

使用情況

[圖片上傳失敗...(image-92e8b6-1646005867416)]

可以看到replaceAll的使用率高達(dá)42.5%,這么新的特性只有20%的不知道

String.prototype.matchAll()

簡(jiǎn)介

ES2020 增加了String.prototype.matchAll()方法，可以一次性取出所有匹配判莉。但需要注意的是豆挽，它返回的是一個(gè)遍歷器（Iterator），而不是數(shù)組骂租，如有需要可以通過擴(kuò)展運(yùn)算符或者Array.form等方式將它轉(zhuǎn)為數(shù)組

使用情況

[圖片上傳失敗...(image-7ff7c-1646005867416)]

25.5%祷杈，每4個(gè)人中有1個(gè)人在使用

邏輯賦值 `&&=`

簡(jiǎn)介

x &&= y，表示當(dāng)x的值轉(zhuǎn)為布爾值為真值時(shí)渗饮，賦值為y但汞；

例如

let a = 1;
let b = 0;

a &&= 2;
console.log(a);
// expected output: 2

b &&= 2;
console.log(b);
// expected output: 0

使用情況

[圖片上傳失敗...(image-859952-1646005867416)]

可以看到，超過一半的人還沒聽過邏輯賦值&&=

Promise.any()

簡(jiǎn)介

Promise.any(promises) 是 ES2021 新增的特性互站，它能夠并行運(yùn)行 promise私蕾，并解析為 promises 列表中第一個(gè)成功解析的 promise 的值

例如

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));
// expected output: "quick"

使用情況

[圖片上傳失敗...(image-f40564-1646005867416)]

使用率還真不錯(cuò)，31.4%

Array.prototype.at()

簡(jiǎn)介

at()接收一個(gè)整數(shù)作為參數(shù)胡桃，表示獲取指定位置的成員

參數(shù)正數(shù)就表示順數(shù)第幾個(gè)踩叭，負(fù)數(shù)表示倒數(shù)第幾個(gè)，這可以很方便的某個(gè)數(shù)組末尾的元素

例如

var arr = [1, 2, 3, 4, 5]
// 第0個(gè)
console.log(arr.at(0)) // 1
// 正數(shù)第一個(gè)
console.log(arr.at(1)) // 2
// 倒數(shù)第一個(gè)
console.log(arr.at(-1)) // 5

使用情況

[圖片上傳失敗...(image-290c74-1646005867416)]

可以看到翠胰，也有很多人還不知道at函數(shù)

瀏覽器 API

下面來看瀏覽器提供的一些功能的使用情況

Service Worker

簡(jiǎn)介

一句話概括什么是 Service Worker

一個(gè)服務(wù)器與瀏覽器之間的中間人角色容贝，如果網(wǎng)站中注冊(cè)了service worker那么它可以攔截當(dāng)前網(wǎng)站所有的請(qǐng)求，進(jìn)行判斷（需要編寫相應(yīng)的判斷程序）之景，如果需要向服務(wù)器發(fā)起請(qǐng)求的就轉(zhuǎn)給服務(wù)器斤富，如果可以直接使用緩存的就直接返回緩存不再轉(zhuǎn)給服務(wù)器。從而大大提高瀏覽體驗(yàn)

使用情況

[圖片上傳失敗...(image-41f735-1646005867416)]

Intl

簡(jiǎn)介

Intl 是一個(gè)全局對(duì)象锻狗，它的主要用途就是展示國際化信息满力，可以將字符串焕参，數(shù)字和日期和時(shí)間轉(zhuǎn)換為指定地區(qū)的格式

Intl里頭提供了十多個(gè)好用的API，比如：

Intl.RelativeTimeFormat 可用于為時(shí)間戳生成相對(duì)于當(dāng)前時(shí)間的人性化短語
Intl.ListFormat 可用于使用 conjunction油额，disjunction和unit 參數(shù)把數(shù)組元素連接成短語
Intl.NumberFormat可用于使用將大數(shù)格式化為指定的語言格式
Intl.DateTimeFormat API上的 formatRange 方法可用于生成時(shí)間范圍的字符串

使用情況

[圖片上傳失敗...(image-d80f1b-1646005867416)]

Web Audio

簡(jiǎn)介

Web Audio提供了一個(gè)強(qiáng)大的音頻處理系統(tǒng)叠纷，本質(zhì)上是 Web 端處理和分析音頻的一套 API

它可以設(shè)置不同的音頻來源（包括<audio>節(jié)點(diǎn)、 ArrayBuffer 潦嘶、用戶設(shè)備等）涩嚣，對(duì)音頻添加音效，生成可視化圖形等

使用情況

[圖片上傳失敗...(image-9527c0-1646005867416)]

WebGL

簡(jiǎn)介

百度百科給出的解釋是 WebGL 是一種 3D 繪圖協(xié)議掂僵，而維基百科給出的解釋卻是一種 JavaScript API

由于 WebGL 技術(shù)旨在幫助我們?cè)诓皇褂貌寮那闆r下在任何兼容的網(wǎng)頁瀏覽器中開發(fā)交互式 2D 和 3D 網(wǎng)頁效果缓艳，我們可以將其理解為一種幫助我們開發(fā) 3D 網(wǎng)頁的繪圖技術(shù)，當(dāng)然底層還是 JavaScript API

使用情況

[圖片上傳失敗...(image-83a7fb-1646005867416)]

Web Animations API

簡(jiǎn)介

簡(jiǎn)稱WAAPI看峻，是一組 Web 動(dòng)畫接口阶淘，可用于復(fù)雜Web動(dòng)畫

它提供了兩個(gè)核心的對(duì)象

KeyframeEffect 描述動(dòng)畫屬性
Animation 控制播放

使用情況

[圖片上傳失敗...(image-389292-1646005867416)]

WebRTC

簡(jiǎn)介

全稱 Web Real-Time Communication，Web 實(shí)時(shí)通信

由一組標(biāo)準(zhǔn)互妓、協(xié)議和JavaScript API組成溪窒，用于實(shí)現(xiàn)瀏覽器之間（端到端）的音頻、視頻及數(shù)據(jù)共享

WebRTC 主要了解以下三塊：

MediaStream：用于獲取音頻和視頻流
RTCPeerConnection：用于音頻和視頻數(shù)據(jù)通信
RTCDataChannel：用于任意應(yīng)用數(shù)據(jù)通信

使用情況

[圖片上傳失敗...(image-7288d7-1646005867416)]

Web Speech

簡(jiǎn)介

Web Speech 是 Web 語言相關(guān)的 API 冯勉，能夠?qū)⒄Z音數(shù)據(jù)合并到 Web 應(yīng)用程序中

主要包括兩個(gè)部分

語音合成(文本到語音)
語音識(shí)別(異步語音識(shí)別)

使用情況

[圖片上傳失敗...(image-3a954c-1646005867416)]

WebSocket

簡(jiǎn)介

WebSocket是H5提供的一種瀏覽器與服務(wù)器進(jìn)行實(shí)時(shí)雙向通信的網(wǎng)絡(luò)技術(shù)澈蚌，屬于應(yīng)用層協(xié)議。它基于TCP傳輸協(xié)議灼狰，并復(fù)用HTTP的握手通道

簡(jiǎn)單來說宛瞄，記住幾點(diǎn)：

WebSocket可以在瀏覽器里使用
支持雙向通信
使用很簡(jiǎn)單

使用情況

[圖片上傳失敗...(image-807b05-1646005867416)]

Web Components

簡(jiǎn)介

Web Components 是 W3C 推動(dòng)的一項(xiàng)標(biāo)準(zhǔn)，旨在豐富 HTML 的 DOM 特性交胚，讓 HTML 有更強(qiáng)大的復(fù)用能力

簡(jiǎn)單來說份汗，可以自定義元素或者叫組件

核心套件：Custom elements、Shadow DOM蝴簇、HTML templates

使用情況

[圖片上傳失敗...(image-46feab-1646005867416)]

Shadow DOM

簡(jiǎn)介

Shadow DOM是Web Components 核心套件之一

Web components 的一個(gè)重要屬性是封裝——可以將標(biāo)記結(jié)構(gòu)杯活、樣式和行為隱藏起來，并與頁面上的其他代碼相隔離熬词，保證不同的部分不會(huì)混在一起旁钧，可使代碼更加干凈、整潔互拾。其中歪今，Shadow DOM 接口是關(guān)鍵所在，它可以將一個(gè)隱藏的颜矿、獨(dú)立的 DOM 附加到一個(gè)元素上

使用情況

[圖片上傳失敗...(image-c6093-1646005867416)]

Page Visibility API

簡(jiǎn)介

通過此API可以了解文檔何時(shí)顯示或隱藏寄猩，以及當(dāng)前文檔是什么狀態(tài)

它的意義在于，通過監(jiān)聽網(wǎng)頁的可見性或衡，可以預(yù)判網(wǎng)頁的卸載焦影，還可以用來節(jié)省資源，減緩電能的消耗封断。比如斯辰，一旦用戶不看網(wǎng)頁，下面這些網(wǎng)頁行為都是可以暫停的坡疼。

對(duì)服務(wù)器的輪詢
網(wǎng)頁動(dòng)畫
正在播放的音頻或視頻

核心的一些API如：document.visibilityState彬呻、document.hidden以及visibilitychange事件

使用情況

[圖片上傳失敗...(image-64de66-1646005867416)]

Broadcast Channel API

簡(jiǎn)介

Broadcast Channel API 可以實(shí)現(xiàn)同源下瀏覽器不同窗口，Tab頁柄瑰，frame或者 iframe 下的瀏覽器上下文 (通常是同一個(gè)網(wǎng)站下不同的頁面)之間的簡(jiǎn)單通訊

使用情況

[圖片上傳失敗...(image-c0dbcb-1646005867416)]

Geolocation API

簡(jiǎn)介

Geolocation 地理位置相關(guān)的API闸氮，可用于獲取到當(dāng)前設(shè)備的經(jīng)緯度（位置）

常見方法：

Geolocation.getCurrentPosition()：確定設(shè)備位置并返回一個(gè)攜帶位置信息對(duì)象
Geolocation.watchPosition()：注冊(cè)一個(gè)位置改變監(jiān)聽器
Geolocation.clearWatch()：取消監(jiān)聽器

使用情況

[圖片上傳失敗...(image-8f6c38-1646005867416)]

File System Access API

簡(jiǎn)介

文件訪問相關(guān)API，支持讀教沾、寫和文件管理等功能

使用情況

[圖片上傳失敗...(image-ab1061-1646005867416)]

Web Share API

簡(jiǎn)介

Web Share API提供了一種機(jī)制蒲跨，可以將文本、鏈接授翻、文件和其他內(nèi)容分享到用戶選擇的任意共享目標(biāo)

常見方法：

navigator.canShare() 判斷能否分享或悲，返回布爾值
navigator.share() 分享方法，如果傳遞的數(shù)據(jù)被成功發(fā)送到共享目標(biāo)堪唐，則返回一個(gè)resolve的Promise

使用情況

[圖片上傳失敗...(image-bd6ad7-1646005867416)]

WebXR

簡(jiǎn)介

WebXR 是一組支持將渲染3D場(chǎng)景用來呈現(xiàn)虛擬世界（虛擬現(xiàn)實(shí)巡语，也稱作VR）或?qū)D形圖像添加到現(xiàn)實(shí)世界（增強(qiáng)現(xiàn)實(shí)，也稱作AR）的標(biāo)準(zhǔn)

WebXR 設(shè)備 API 實(shí)現(xiàn)了 WebXR 功能集的核心淮菠，管理輸出設(shè)備的選擇男公，以適當(dāng)?shù)膸俾蕦?D場(chǎng)景呈現(xiàn)給所選設(shè)備，并管理使用輸入控制器創(chuàng)建的運(yùn)動(dòng)矢量

使用情況

[圖片上傳失敗...(image-7a32f4-1646005867416)]

其他特性

Progressive Web Apps (PWAs)

簡(jiǎn)介

Progressive Web App 中文翻譯為：漸進(jìn)式Web應(yīng)用

帶來的體驗(yàn)將網(wǎng)絡(luò)應(yīng)用的優(yōu)點(diǎn)與原生應(yīng)用的優(yōu)點(diǎn)相結(jié)合合陵。用戶在瀏覽器中第一次訪問時(shí)就能體會(huì)到它們的好處枢赔，因?yàn)椴恍枰M(jìn)行任何安裝

在用戶隨著時(shí)間的推移增進(jìn)與應(yīng)用的關(guān)系后，其功能會(huì)變得越來越強(qiáng)大拥知。它即使在不可靠網(wǎng)絡(luò)上也能快速加載糠爬、能夠發(fā)送相關(guān)推送通知、具有桌面圖標(biāo)举庶，并且可采用頂層全屏體驗(yàn)的方式加載

PWA使用標(biāo)準(zhǔn)的Web開發(fā)技術(shù)执隧，可以支持離線可用，通過service worker進(jìn)行更新和緩存户侥，采用App shell模型基礎(chǔ)開發(fā)镀琉，界面和交互類似應(yīng)用。支持推送蕊唐，未來還支持操作設(shè)備（調(diào)用攝像頭屋摔、讀取陀螺儀等）

使用情況

[圖片上傳失敗...(image-60addd-1646005867416)]

WebAssembly

簡(jiǎn)介

WebAssembly是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運(yùn)行

它是一種低級(jí)的類匯編語言替梨，具有緊湊的二進(jìn)制格式钓试，可以接近原生的性能運(yùn)行装黑，并為諸如C / C ++等語言提供一個(gè)編譯目標(biāo)，以便它們可以在Web上運(yùn)行弓熏。它也被設(shè)計(jì)為可以與JavaScript共存恋谭，允許兩者一起工作

使用情況

[圖片上傳失敗...(image-a5517b-1646005867416)]

庫

庫的調(diào)查分為以下 6 類來說

前端框架
后端框架
測(cè)試工具
移動(dòng)端和客戶端
構(gòu)建工具
Monorepo 工具

概覽

滿意度排名

首先來看看滿意度排名

[圖片上傳失敗...(image-bdc2d0-1646005867416)]

可以看到 vite 的滿意是最高97%，其次是 esbuild 挽鞠、 Testing Library疚颊，另外排在第一梯隊(duì)的還有tsc CLI、Jest信认、Cypress和Next

React 和 Vue 都排著第二梯隊(duì)分別是84%材义、80%,以及還有Svelte、Express嫁赏、Rollup其掂、Electron、Puppeteer潦蝇、Nuxt等等

Gulp清寇、Angular墊底了

值得關(guān)注的技術(shù)

使用率低，滿意度高

[圖片上傳失敗...(image-1f7e8c-1646005867416)]

可采用的安全技術(shù)

使用率高护蝶，滿意度高

[圖片上傳失敗...(image-864dca-1646005867416)]

目前較難推薦的技術(shù)

使用率低华烟，滿意度低

[圖片上傳失敗...(image-83c2e0-1646005867416)]

慎重選擇的技術(shù)

使用率高，滿意度低

[圖片上傳失敗...(image-b5deff-1646005867416)]

前端框架

這里僅介紹認(rèn)知率前十的框架

[圖片上傳失敗...(image-a5b6bb-1646005867416)]

React

React是流行的javascript框架之一持灰，在2019年及以后將會(huì)更加流行盔夜。React于2013年首次發(fā)布，多年來廣受歡迎堤魁。它是一個(gè)聲明性的喂链、基于組件的、用于構(gòu)建用戶界面的高效javascript庫

npm最新周下載量：14,835,595

github斬獲star數(shù)：183k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第一妥泉、使用度第一椭微、關(guān)注度第四、滿意度第三

github地址：https://github.com/facebook/react

官網(wǎng)： https://reactjs.org/

[圖片上傳失敗...(image-8dba25-1646005867416)]

Vue.js

vue是一門漸進(jìn)式的javascript框架盲链。所謂的漸進(jìn)式就是從中心的的視圖層渲染開始向外擴(kuò)散的構(gòu)建工具層蝇率。這過程會(huì)經(jīng)歷：視圖層渲染->組件機(jī)制->路由機(jī)制->狀態(tài)管理->構(gòu)建工具；具有易用刽沾，靈活本慕，高效，入門門檻低的特點(diǎn)

npm最新周下載量：3,060,807

github vue3核心庫斬獲star數(shù)：27.8k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第二侧漓、使用度第三锅尘、關(guān)注度第三、滿意度第四

github地址：https://github.com/vuejs/core

最新官網(wǎng)： https://vuejs.org/

[圖片上傳失敗...(image-442056-1646005867416)]

Angular

Angular 是一個(gè)應(yīng)用設(shè)計(jì)框架與開發(fā)平臺(tái)布蔗，用于創(chuàng)建高效藤违、復(fù)雜浪腐、精致的單頁面應(yīng)用

npm最新周下載量：2,910,878

github斬獲star數(shù)：79.8k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第三、使用度第二顿乒、關(guān)注度第九议街、滿意度第九

github地址：https://github.com/angular/angular

官網(wǎng)： https://angular.io/

[圖片上傳失敗...(image-471e7-1646005867416)]

Svelte

Svelte 是一種全新的構(gòu)建用戶界面的方法。傳統(tǒng)框架如 React 和 Vue 在瀏覽器中需要做大量的工作淆游，而 Svelte 將這些工作放到構(gòu)建應(yīng)用程序的編譯階段來處理。

與使用虛擬（virtual）DOM 差異對(duì)比不同隔盛。Svelte 編寫的代碼在應(yīng)用程序的狀態(tài)更改時(shí)就能像做外科手術(shù)一樣更新 DOM

npm最新周下載量：266,505

github斬獲star數(shù)：56.3k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第四犹菱、使用度第四、關(guān)注度第一吮炕、滿意度第二

github地址：https://github.com/sveltejs/svelte

官網(wǎng)：https://svelte.dev/

[圖片上傳失敗...(image-e5465b-1646005867416)]

Ember

Ember.js是一個(gè)開源的JavaScript客戶端框架腊脱，用于開發(fā)Web應(yīng)用程序并使用MVC（模型 - 視圖 - 控制器）架構(gòu)模式。在Ember.js中龙亲，路由用作模型陕凹，handlebar模板作為視圖，控制器處理模型中的數(shù)據(jù)

npm最新周下載量：182,406

github斬獲star數(shù)：22.1k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第五鳄炉、使用度第六杜耙、關(guān)注度第十、滿意度第十

github地址：https://github.com/emberjs/ember.js

官網(wǎng)：https://emberjs.com/

[圖片上傳失敗...(image-47e7a1-1646005867416)]

Preact

Preact是React的開源替代產(chǎn)品拂盯，這個(gè)庫擁有最輕量級(jí)的框架和最優(yōu)秀的性能佑女，使其成為React的誘人替代品。并且提供了相同的ES6 API谈竿，還具有組件和Virtual DOM

npm最新周下載量：1,124,144

github斬獲star數(shù)：31.2k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第六团驱、使用度第五、關(guān)注度第七空凸、滿意度第七

github地址：https://github.com/preactjs/preact

官網(wǎng)：https://preactjs.com

[圖片上傳失敗...(image-828167-1646005867416)]

Alpine.js

Alpine.js 通過很低的成本提供了與 Vue 或 React 這類大型框架相近的響應(yīng)式和聲明式特性嚎花。你可以繼續(xù)操作 DOM，并在需要的時(shí)候使用 Alpine.js呀洲∥裳。可以理解為 JavaScript 版本的 Tailwind

github斬獲star數(shù)：20k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第七、使用度第八道逗、關(guān)注度第六丛楚、滿意度第五

github地址：https://github.com/alpinejs/alpine

官網(wǎng)：https://alpinejs.dev/

[圖片上傳失敗...(image-3f4068-1646005867416)]

Solid

號(hào)稱支持現(xiàn)代前端特性：JSX、Fragments憔辫、Context趣些、Portals、Suspense贰您、Streaming SSR坏平、Error Boundaries拢操、并發(fā)渲染等現(xiàn)代功能。無論是客戶端還是服務(wù)端舶替，目前的性能評(píng)分相當(dāng)?shù)母?/p>

npm最新周下載量：16,930

github斬獲star數(shù)：14.8k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第八令境、使用度第九、關(guān)注度第二顾瞪、滿意度第一

github地址：https://github.com/solidjs/solid

官網(wǎng)：https://www.solidjs.com/

[圖片上傳失敗...(image-a5a874-1646005867416)]

Lit

Lit 是一個(gè)基于 Web-Component 構(gòu)建的前端框架舔庶，前身基本可以理解為即 Polymer。特點(diǎn)包括：基于 Web-Component陈醒、小惕橙、性能強(qiáng)悍、兼容性較好

npm最新周下載量：112,112

github斬獲star數(shù)：10.5k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第九钉跷、使用度第六弥鹦、關(guān)注度第五、滿意度第六

github地址：https://github.com/lit/lit

官網(wǎng)：https://lit.dev/

[圖片上傳失敗...(image-1bb9c9-1646005867416)]

Stimulus

Stimulus 是一個(gè)輕量級(jí)前端框架爷辙，和熱門的 JavaScript 框架（例如 React彬坏、Vue）相比，Stimulus 本身不處理 HTML 渲染膝晾，而是為已渲染的 HTML 添加行為——大部分情況下栓始，就是跟服務(wù)端渲染配合

npm最新周下載量：143,434

github斬獲star數(shù)：11.2k

2021 JS年度調(diào)查報(bào)告排名：認(rèn)知度第十、使用度第十血当、關(guān)注度第八混滔、滿意度第八

github地址：https://github.com/hotwired/stimulus

官網(wǎng)：https://stimulus.hotwired.dev/

[圖片上傳失敗...(image-260ba9-1646005867416)]

前端框架現(xiàn)狀滿意狀況

[圖片上傳失敗...(image-5310a0-1646005867416)]

絕大多數(shù)人表示還是不錯(cuò)的

后端框架

服務(wù)端的JavaScript

[圖片上傳失敗...(image-ded4af-1646005867416)]

Express

基于 Node.js 平臺(tái)，快速歹颓、開放坯屿、極簡(jiǎn)的 Web 開發(fā)框架

認(rèn)知度排名第一、使用度第一巍扛、關(guān)注度第六领跛、滿意度第六

npm最新周下載量：23,540,020

github斬獲star數(shù)：56.1k

github地址：https://github.com/expressjs/express

官網(wǎng)：https://expressjs.com/

[圖片上傳失敗...(image-301609-1646005867416)]

Next.js

一個(gè)用于生產(chǎn)環(huán)境的React 框架，Next.js 為您提供生產(chǎn)環(huán)境所需的所有功能以及最佳的開發(fā)體驗(yàn)：包括靜態(tài)及服務(wù)器端融合渲染撤奸、支持 TypeScript吠昭、智能化打包、路由預(yù)取等功能無需任何配置

認(rèn)知度排名第二胧瓜、使用度第二矢棚、關(guān)注度第四、滿意度第四

npm最新周下載量：2,281,072

github斬獲star數(shù)：82.1k

github地址：https://github.com/vercel/next.js

官網(wǎng)：https://nextjs.org/

[圖片上傳失敗...(image-f0ae9c-1646005867416)]

Gatsby

Gatsby 是一個(gè)基于 React 的免費(fèi)府喳、開源框架蒲肋，用于幫助開發(fā)者構(gòu)建運(yùn)行速度極快的網(wǎng)站和應(yīng)用程序

認(rèn)知度排名第三、使用度第三、關(guān)注度第十三兜粘、滿意度第十三

npm最新周下載量：454,594

github斬獲star數(shù)：52.4k

github地址：https://github.com/gatsbyjs/gatsby

官網(wǎng)：https://www.gatsbyjs.com/

[圖片上傳失敗...(image-d9f6e2-1646005867416)]

Nuxt

nuxt是一個(gè)專注于ui渲染的應(yīng)用框架申窘，可以快速搭建項(xiàng)目，還提供了服務(wù)端渲染的功能

認(rèn)知度排名第四孔轴、使用度第四剃法、關(guān)注度第九、滿意度第九

npm最新周下載量：393,340

github斬獲star數(shù)：39.5k

github地址：https://github.com/nuxt/nuxt.js

官網(wǎng)：https://nuxtjs.org/

[圖片上傳失敗...(image-f5e0c9-1646005867416)]

Nest

Nestjs 是一個(gè)構(gòu)建在Node.js Express服務(wù)器之上的現(xiàn)代Web框架

認(rèn)知度排名第五路鹰、使用度第五贷洲、關(guān)注度第七、滿意度第七

npm最新周下載量：1,195,730

github斬獲star數(shù)：44.9k

github地址：https://github.com/nestjs/nest

官網(wǎng)：https://nestjs.com/

[圖片上傳失敗...(image-c4527f-1646005867416)]

代碼測(cè)試工具

認(rèn)知度排名

[圖片上傳失敗...(image-1b1ba0-1646005867416)]

使用度排名

[圖片上傳失敗...(image-6d8741-1646005867416)]

關(guān)注度排名

[圖片上傳失敗...(image-211fd4-1646005867416)]

滿意度排名

[圖片上傳失敗...(image-d5ddd5-1646005867416)]

移動(dòng)端和客戶端

用于移動(dòng)設(shè)備和桌面端app的 JavaScript

認(rèn)知度排名

[圖片上傳失敗...(image-40a4db-1646005867416)]

使用度排名

[圖片上傳失敗...(image-8f89e4-1646005867416)]

關(guān)注度排名

[圖片上傳失敗...(image-c5109e-1646005867416)]

滿意度排名

[圖片上傳失敗...(image-9454fd-1646005867416)]

構(gòu)建工具

編譯和打包代碼

認(rèn)知度排名

[圖片上傳失敗...(image-c9003b-1646005867416)]

使用度排名

[圖片上傳失敗...(image-3fe2f8-1646005867416)]

關(guān)注度排名

[圖片上傳失敗...(image-301aa5-1646005867416)]

滿意度排名

[圖片上傳失敗...(image-f6fcad-1646005867416)]

Monorepo 工具

認(rèn)知度排名

[圖片上傳失敗...(image-891498-1646005867416)]

使用度排名

[圖片上傳失敗...(image-ac5a73-1646005867416)]

關(guān)注度排名

[圖片上傳失敗...(image-10850-1646005867416)]

滿意度排名

[圖片上傳失敗...(image-a8e7be-1646005867416)]

其他常用工具

工具類庫

[圖片上傳失敗...(image-9edac8-1646005867416)]

工具函數(shù)庫

[圖片上傳失敗...(image-403f9a-1646005867416)]

常用哪個(gè)引擎/運(yùn)行時(shí)/執(zhí)行環(huán)境

[圖片上傳失敗...(image-3faff3-1646005867416)]

能編譯成JavaScript的語言

[圖片上傳失敗...(image-d439ab-1646005867416)]

受訪者

來自

[圖片上傳失敗...(image-5eef31-1646005867416)]

年齡

[圖片上傳失敗...(image-cde108-1646005867416)]

工作幾年

[圖片上傳失敗...(image-cf228e-1646005867416)]

薪資

[圖片上傳失敗...(image-4f3fe6-1646005867416)]

常用的 blog 和雜志

[圖片上傳失敗...(image-a22404-1646005867416)]

關(guān)注的網(wǎng)站

[圖片上傳失敗...(image-faa07-1646005867416)]

訂閱的博客

[圖片上傳失敗...(image-2b8a7b-1646005867416)]

受關(guān)注的人

[圖片上傳失敗...(image-71d7e8-1646005867416)]

今年亮點(diǎn)

采用最多的特性和技術(shù)

[圖片上傳失敗...(image-2b3dce-1646005867416)]

采用最多的特性

逐年使用率進(jìn)步前三名的特性

??空值合并運(yùn)算符
?.
私有屬性

采用最多的技術(shù)

逐年使用率進(jìn)步前三名的技術(shù)

esbuild
tsc CLI
Testing Library

最高滿意度和最受關(guān)注的

[圖片上傳失敗...(image-f4fa49-1646005867416)]

最高滿意度

滿意率前三名的技術(shù)

Vite
Testing Library
esbuild

最受關(guān)注

Vite
Vitest
esbuild

結(jié)語

更多相關(guān)內(nèi)容可以閱讀原報(bào)告

好了晋柱，以上就是本文的所有內(nèi)容了优构，如有問題歡迎留言~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市趣斤，隨后出現(xiàn)的幾起案子俩块，更是在濱河造成了極大的恐慌黎休，老刑警劉巖浓领，帶你破解...
沈念sama閱讀 206,482評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異势腮，居然都是意外死亡联贩，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,377評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門捎拯，熙熙樓的掌柜王于貴愁眉苦臉地迎上來泪幌，“玉大人，你說我怎么就攤上這事署照』隼幔” “怎么了？”我有些...
開封第一講書人閱讀 152,762評(píng)論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵建芙，是天一觀的道長没隘。經(jīng)常有香客問我，道長禁荸，這世上最難降的妖魔是什么右蒲？我笑而不...
開封第一講書人閱讀 55,273評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮赶熟，結(jié)果婚禮上瑰妄，老公的妹妹穿的比我還像新娘。我一直安慰自己映砖，他們只是感情好间坐，可當(dāng)我...
茶點(diǎn)故事閱讀 64,289評(píng)論 5贊 373
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布揩环。她就那樣靜靜地躺著，像睡著了一般晤碘。火紅的嫁衣襯著肌膚如雪韭山。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,046評(píng)論 1贊 285
城市分裂傳說
那天逝撬，我揣著相機(jī)與錄音浴骂，去河邊找鬼。笑死宪潮，一個(gè)胖子當(dāng)著我的面吹牛溯警，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播狡相，決...
沈念sama閱讀 38,351評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼梯轻，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了尽棕？” 一聲冷哼從身側(cè)響起喳挑，我...
開封第一講書人閱讀 36,988評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎滔悉，沒想到半個(gè)月后伊诵，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,476評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡回官，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,948評(píng)論 2贊 324
?白月光啟示錄
正文我和宋清朗相戀三年曹宴，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片歉提。...
茶點(diǎn)故事閱讀 38,064評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡笛坦，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出苔巨，到底是詐尸還是另有隱情版扩，我是刑警寧澤，帶...
沈念sama閱讀 33,712評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布侄泽，位于F島的核電站礁芦，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏蔬顾。R本人自食惡果不足惜宴偿，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,261評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望诀豁。院中可真熱鬧窄刘，春花似錦、人聲如沸舷胜。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,264評(píng)論 0贊 19
一樁弒父案活翩，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至翻伺，卻和暖如春材泄，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背吨岭。一陣腳步聲響...
開封第一講書人閱讀 31,486評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工拉宗，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人辣辫。一個(gè)月前我還...
沈念sama閱讀 45,511評(píng)論 2贊 354
代替公主和親
正文我出身青樓旦事，卻偏偏與公主長得像，于是被迫代替她去往敵國和親急灭。傳聞我的和親對(duì)象是個(gè)殘疾皇子姐浮，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,802評(píng)論 2贊 345

JavaScript 2021年度報(bào)告新鮮出爐

前言

特性

概覽

語言特性

Proxy

簡(jiǎn)介

使用情況

Promise.allSettled()

簡(jiǎn)介

使用情況

動(dòng)態(tài)引入

簡(jiǎn)介

使用情況

??運(yùn)算符

簡(jiǎn)介

使用情況

?.運(yùn)算符

使用情況

私有屬性

簡(jiǎn)介

使用情況

BigInt

簡(jiǎn)介

使用情況

String.prototype.replaceAll()

簡(jiǎn)介

使用情況

String.prototype.matchAll()

簡(jiǎn)介

使用情況

邏輯賦值 &&=

簡(jiǎn)介

使用情況

Promise.any()

簡(jiǎn)介

使用情況

Array.prototype.at()

簡(jiǎn)介

使用情況

瀏覽器 API

Service Worker

簡(jiǎn)介

使用情況

Intl

簡(jiǎn)介

使用情況

Web Audio

簡(jiǎn)介

使用情況

WebGL

簡(jiǎn)介

使用情況

Web Animations API

簡(jiǎn)介

使用情況

WebRTC

簡(jiǎn)介

使用情況

Web Speech

簡(jiǎn)介

使用情況

WebSocket

簡(jiǎn)介

使用情況

Web Components

簡(jiǎn)介

使用情況

Shadow DOM

簡(jiǎn)介

使用情況

Page Visibility API

簡(jiǎn)介

使用情況

Broadcast Channel API

簡(jiǎn)介

使用情況

Geolocation API

簡(jiǎn)介

使用情況

邏輯賦值 `&&=`