前言

由于一些原因，一年一度 JavaScript 年度调查报告被推迟到本月（2022 年 2 月）

本月JavaScript 2021年度报告新鲜出炉，本次调查共采访了 16,085 名、来自 148+ 个国家的开发人员

通过该报告，可以很好的了解 Web 开发生态中即将出现的趋势，以帮助我们更好的做出技术选型

部分看点

??运算符是使用度增长最大的特性
Vite 以极高的满意度97.4%位居满意度榜首
三大框架的满意度，Vue和React同为第二梯队，Angular垫底
esbuild是使用率同比增长最多的技术
TypeScript 是迄今为止最流行的扩展 JS 的编程语言，把 Elm 和Flow远远的甩在了第二和第三名
老牌工具库如 Axios、Lodash、Moment 仍然是最受欢迎的工具库

特性

下面我们从特性开始看

概览

特性分为以下3类：

JavaScript语言特性
浏览器API
其他特性

使用情况概览如下：

[图片上传失败...(image-67bb9a-1646005867416)]

图中，外圈的尺寸代表了了解这个特性的用户数量, 内圈的尺寸代表了实际使用这个特性的用户数量

可以看到，许多相对较新的功能已经显示出很高的采用率

语言特性

Proxy

简介

Proxy 是代理的意思，本质是一个构造函数，通过该构造函数构造对象时接受两个参数：target和handler

target表示的就是要拦截（代理）的目标对象
handler是用来定制拦截行为

作用是在目标对象之前架设了一层“拦截”，当外界对该对象的访问，都必须先通过这层拦截，有了这种拦截机制，当外界的访问我们可以对进行一些操作

使用情况

Proxy 的使用情况如下：

[图片上传失败...(image-1591ef-1646005867416)]

可以看到，知道它的人并使用它的人在逐年增多，2021 年已经有 26.1% 的人在使用它了

Promise.allSettled()

简介

此方法 ES2020 引入，可接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例

与Promise.all()有点像，但不同的是：

Promise.allSettled() 只有等到所有这些参数实例都返回结果（不管是 fulfilled 还是 rejected ）包装实例才会结束

因此如果想知道每个promise的结果，我们可以使用 Promise.allSettled()，而Promise.all()更适合彼此相互依赖或者在其中任何一个reject时立即结束的情景

使用情况

[图片上传失败...(image-f2486b-1646005867416)]

2021 年有 19% 的人使用它

动态引入

简介

ES2020提案引入import()函数，用于支持动态引入模块，由于是个函数，可用于任何地方

使用场景：按需加载、条件加载、动态的模块路径等等

使用情况

[图片上传失败...(image-7d01f3-1646005867416)]

动态引入虽然是很新的特性，但一出来就得到大家的喜爱，在 2021 年使用率已经相当的高了：48.9%

??运算符

简介

??运算符是 ES2020 引入，也被称为null判断运算符( Nullish coalescing operator)

它的行为类似||但更严，它必须运算符左侧的值为null或undefined时，才会返回右侧的值，而||运算符左边是空字符串或false或0，都会返回后侧的值

使用情况

[图片上传失败...(image-76e761-1646005867416)]

可以看到它的使用率已经高达67.2%，这应该是本次调查的语言特性使用率排名第2的特性了

?.运算符

?.也被称为链判断运算符（optional chaining operator）

直接在链式调用的时候判断，判断左侧的对象是否为null或undefined，如果是的，就不再往下运算，而是返回undefined。比如：

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

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

链判断运算符有三种用法。

obj?.prop 对象属性
obj?.[expr] 同上
func?.(...args) 函数或对象方法的调用

使用情况

[图片上传失败...(image-937ccb-1646005867416)]

这是?.运算符是所有特性中使用率第1的特性了，高达85.8%

私有属性

简介

默认情况，类的成员（属性和方法）都是public，但我们可以通过添加前缀 # 的方式，将类的成员变成私有的

基础语法：

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

凡被#修饰过的类成员，都不能被子类继承

使用情况

[图片上传失败...(image-1a2f29-1646005867416)]

可以看到，也有 20% 的使用率，还不错

BigInt

简介

BigInt是后来新增的基本数据类型，跟Number类似

但 BigInt用于当整数值大于Number数据类型所支持的范围时，这种数据类型允许我们安全地对大整数执行算术操作，而不需要使用其他库

创建BigInt类型的方式有两种方式

只需在整数的末尾追加n；

let b1 = 9999999999999999n

使用BigInt()函数；

let b2 = BigInt(9999999999999999)

需要注意，不能使用Number和BigInt操作数的混合执行算术运算，否则会报TypeError

使用情况

[图片上传失败...(image-e01fb6-1646005867416)]

可以看到80%以上的人都知道BigInt，可能使用场景不是特别多，只有16.5%的人使用

String.prototype.replaceAll()

简介

String.prototype.replaceAll()用法与String.prototype.replace()类似

但是replace仅替换第一次出现的子字符串，而replaceAll会替换所有

例如：

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

使用情况

[图片上传失败...(image-92e8b6-1646005867416)]

可以看到replaceAll的使用率高达42.5%,这么新的特性只有20%的不知道

String.prototype.matchAll()

简介

ES2020 增加了String.prototype.matchAll()方法，可以一次性取出所有匹配。但需要注意的是，它返回的是一个遍历器（Iterator），而不是数组，如有需要可以通过扩展运算符或者Array.form等方式将它转为数组

使用情况

[图片上传失败...(image-7ff7c-1646005867416)]

25.5%，每4个人中有1个人在使用

逻辑赋值 `&&=`

简介

x &&= y，表示当x的值转为布尔值为真值时，赋值为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()

简介

Promise.any(promises) 是 ES2021 新增的特性，它能够并行运行 promise，并解析为 promises 列表中第一个成功解析的 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)]

使用率还真不错，31.4%

Array.prototype.at()

简介

at()接收一个整数作为参数，表示获取指定位置的成员

参数正数就表示顺数第几个，负数表示倒数第几个，这可以很方便的某个数组末尾的元素

例如

var arr = [1, 2, 3, 4, 5]
// 第0个
console.log(arr.at(0)) // 1
// 正数第一个
console.log(arr.at(1)) // 2
// 倒数第一个
console.log(arr.at(-1)) // 5

使用情况

[图片上传失败...(image-290c74-1646005867416)]

可以看到，也有很多人还不知道at函数

浏览器 API

下面来看浏览器提供的一些功能的使用情况

Service Worker

简介

一句话概括什么是 Service Worker

一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验

使用情况

[图片上传失败...(image-41f735-1646005867416)]

Intl

简介

Intl 是一个全局对象，它的主要用途就是展示国际化信息，可以将字符串，数字和日期和时间转换为指定地区的格式

Intl里头提供了十多个好用的API，比如：

Intl.RelativeTimeFormat 可用于为时间戳生成相对于当前时间的人性化短语
Intl.ListFormat 可用于使用 conjunction，disjunction和unit 参数把数组元素连接成短语
Intl.NumberFormat可用于使用将大数格式化为指定的语言格式
Intl.DateTimeFormat API上的 formatRange 方法可用于生成时间范围的字符串

使用情况

[图片上传失败...(image-d80f1b-1646005867416)]

Web Audio

简介

Web Audio提供了一个强大的音频处理系统，本质上是 Web 端处理和分析音频的一套 API

它可以设置不同的音频来源（包括节点、 ArrayBuffer 、用户设备等），对音频添加音效，生成可视化图形等

使用情况

[图片上传失败...(image-9527c0-1646005867416)]

WebGL

简介

百度百科给出的解释是 WebGL 是一种 3D 绘图协议，而维基百科给出的解释却是一种 JavaScript API

由于 WebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果，我们可以将其理解为一种帮助我们开发 3D 网页的绘图技术，当然底层还是 JavaScript API

使用情况

[图片上传失败...(image-83a7fb-1646005867416)]

Web Animations API

简介

简称WAAPI，是一组 Web 动画接口，可用于复杂Web动画

它提供了两个核心的对象

KeyframeEffect 描述动画属性
Animation 控制播放

使用情况

[图片上传失败...(image-389292-1646005867416)]

WebRTC

简介

全称 Web Real-Time Communication，Web 实时通信

由一组标准、协议和JavaScript API组成，用于实现浏览器之间（端到端）的音频、视频及数据共享

WebRTC 主要了解以下三块：

MediaStream：用于获取音频和视频流
RTCPeerConnection：用于音频和视频数据通信
RTCDataChannel：用于任意应用数据通信

使用情况

[图片上传失败...(image-7288d7-1646005867416)]

Web Speech

简介

Web Speech 是 Web 语言相关的 API ，能够将语音数据合并到 Web 应用程序中

主要包括两个部分

语音合成(文本到语音)
语音识别(异步语音识别)

使用情况

[图片上传失败...(image-3a954c-1646005867416)]

WebSocket

简介

WebSocket是H5提供的一种浏览器与服务器进行实时双向通信的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道

简单来说，记住几点：

WebSocket可以在浏览器里使用
支持双向通信
使用很简单

使用情况

[图片上传失败...(image-807b05-1646005867416)]

Web Components

简介

Web Components 是 W3C 推动的一项标准，旨在丰富 HTML 的 DOM 特性，让 HTML 有更强大的复用能力

简单来说，可以自定义元素或者叫组件

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

使用情况

[图片上传失败...(image-46feab-1646005867416)]

Shadow DOM

简介

Shadow DOM是Web Components 核心套件之一

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上

使用情况

[图片上传失败...(image-c6093-1646005867416)]

Page Visibility API

简介

通过此API可以了解文档何时显示或隐藏，以及当前文档是什么状态

它的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。

对服务器的轮询
网页动画
正在播放的音频或视频

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

使用情况

[图片上传失败...(image-64de66-1646005867416)]

Broadcast Channel API

简介

Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab页，frame或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面)之间的简单通讯

使用情况

[图片上传失败...(image-c0dbcb-1646005867416)]

Geolocation API

简介

Geolocation 地理位置相关的API，可用于获取到当前设备的经纬度（位置）

常见方法：

Geolocation.getCurrentPosition()：确定设备位置并返回一个携带位置信息对象
Geolocation.watchPosition()：注册一个位置改变监听器
Geolocation.clearWatch()：取消监听器

使用情况

[图片上传失败...(image-8f6c38-1646005867416)]

File System Access API

简介

文件访问相关API，支持读、写和文件管理等功能

使用情况

[图片上传失败...(image-ab1061-1646005867416)]

Web Share API

简介

Web Share API提供了一种机制，可以将文本、链接、文件和其他内容分享到用户选择的任意共享目标

常见方法：

navigator.canShare() 判断能否分享，返回布尔值
navigator.share() 分享方法，如果传递的数据被成功发送到共享目标，则返回一个resolve的Promise

使用情况

[图片上传失败...(image-bd6ad7-1646005867416)]

WebXR

简介

WebXR 是一组支持将渲染3D场景用来呈现虚拟世界（虚拟现实，也称作VR）或将图形图像添加到现实世界（增强现实，也称作AR）的标准

WebXR 设备 API 实现了 WebXR 功能集的核心，管理输出设备的选择，以适当的帧速率将3D场景呈现给所选设备，并管理使用输入控制器创建的运动矢量

使用情况

[图片上传失败...(image-7a32f4-1646005867416)]

其他特性

Progressive Web Apps (PWAs)

简介

Progressive Web App 中文翻译为：渐进式Web应用

带来的体验将网络应用的优点与原生应用的优点相结合。用户在浏览器中第一次访问时就能体会到它们的好处，因为不需要进行任何安装

在用户随着时间的推移增进与应用的关系后，其功能会变得越来越强大。它即使在不可靠网络上也能快速加载、能够发送相关推送通知、具有桌面图标，并且可采用顶层全屏体验的方式加载

PWA使用标准的Web开发技术，可以支持离线可用，通过service worker进行更新和缓存，采用App shell模型基础开发，界面和交互类似应用。支持推送，未来还支持操作设备（调用摄像头、读取陀螺仪等）

使用情况

[图片上传失败...(image-60addd-1646005867416)]

WebAssembly

简介

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行

它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作

使用情况

[图片上传失败...(image-a5517b-1646005867416)]

库

库的调查分为以下 6 类来说

前端框架
后端框架
测试工具
移动端和客户端
构建工具
Monorepo 工具

概览

满意度排名

首先来看看满意度排名

[图片上传失败...(image-bdc2d0-1646005867416)]

可以看到 vite 的满意是最高97%，其次是 esbuild 、 Testing Library，另外排在第一梯队的还有tsc CLI、Jest、Cypress和Next

React 和 Vue 都排着第二梯队分别是84%、80%,以及还有Svelte、Express、Rollup、Electron、Puppeteer、Nuxt等等

Gulp、Angular垫底了

值得关注的技术

使用率低，满意度高

[图片上传失败...(image-1f7e8c-1646005867416)]

可采用的安全技术

使用率高，满意度高

[图片上传失败...(image-864dca-1646005867416)]

目前较难推荐的技术

使用率低，满意度低

[图片上传失败...(image-83c2e0-1646005867416)]

慎重选择的技术

使用率高，满意度低

[图片上传失败...(image-b5deff-1646005867416)]

前端框架

这里仅介绍认知率前十的框架

[图片上传失败...(image-a5b6bb-1646005867416)]

React

React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库

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

github斩获star数：183k

2021 JS年度调查报告排名：认知度第一、使用度第一、关注度第四、满意度第三

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

官网： https://reactjs.org/

[图片上传失败...(image-8dba25-1646005867416)]

Vue.js

vue是一门渐进式的javascript框架。所谓的渐进式就是从中心的的视图层渲染开始向外扩散的构建工具层。这过程会经历：视图层渲染->组件机制->路由机制->状态管理->构建工具；具有易用，灵活，高效，入门门槛低的特点

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

github vue3核心库斩获star数：27.8k

2021 JS年度调查报告排名：认知度第二、使用度第三、关注度第三、满意度第四

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

最新官网： https://vuejs.org/

[图片上传失败...(image-442056-1646005867416)]

Angular

Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用

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

github斩获star数：79.8k

2021 JS年度调查报告排名：认知度第三、使用度第二、关注度第九、满意度第九

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

官网： https://angular.io/

[图片上传失败...(image-471e7-1646005867416)]

Svelte

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM

npm最新周下载量：266,505

github斩获star数：56.3k

2021 JS年度调查报告排名：认知度第四、使用度第四、关注度第一、满意度第二

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

官网：https://svelte.dev/

[图片上传失败...(image-e5465b-1646005867416)]

Ember

Ember.js是一个开源的JavaScript客户端框架，用于开发Web应用程序并使用MVC（模型 - 视图 - 控制器）架构模式。在Ember.js中，路由用作模型，handlebar模板作为视图，控制器处理模型中的数据

npm最新周下载量：182,406

github斩获star数：22.1k

2021 JS年度调查报告排名：认知度第五、使用度第六、关注度第十、满意度第十

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

官网：https://emberjs.com/

[图片上传失败...(image-47e7a1-1646005867416)]

Preact

Preact是React的开源替代产品，这个库拥有最轻量级的框架和最优秀的性能，使其成为React的诱人替代品。并且提供了相同的ES6 API，还具有组件和Virtual DOM

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

github斩获star数：31.2k

2021 JS年度调查报告排名：认知度第六、使用度第五、关注度第七、满意度第七

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

官网：https://preactjs.com

[图片上传失败...(image-828167-1646005867416)]

Alpine.js

Alpine.js 通过很低的成本提供了与 Vue 或 React 这类大型框架相近的响应式和声明式特性。你可以继续操作 DOM，并在需要的时候使用 Alpine.js。可以理解为 JavaScript 版本的 Tailwind

github斩获star数：20k

2021 JS年度调查报告排名：认知度第七、使用度第八、关注度第六、满意度第五

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

官网：https://alpinejs.dev/

[图片上传失败...(image-3f4068-1646005867416)]

Solid

号称支持现代前端特性：JSX、Fragments、Context、Portals、Suspense、Streaming SSR、Error Boundaries、并发渲染等现代功能。无论是客户端还是服务端，目前的性能评分相当的高

npm最新周下载量：16,930

github斩获star数：14.8k

2021 JS年度调查报告排名：认知度第八、使用度第九、关注度第二、满意度第一

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

官网：https://www.solidjs.com/

[图片上传失败...(image-a5a874-1646005867416)]

Lit

Lit 是一个基于 Web-Component 构建的前端框架，前身基本可以理解为即 Polymer。特点包括：基于 Web-Component、小、性能强悍、兼容性较好

npm最新周下载量：112,112

github斩获star数：10.5k

2021 JS年度调查报告排名：认知度第九、使用度第六、关注度第五、满意度第六

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

官网：https://lit.dev/

[图片上传失败...(image-1bb9c9-1646005867416)]

Stimulus

Stimulus 是一个轻量级前端框架，和热门的 JavaScript 框架（例如 React、Vue）相比，Stimulus 本身不处理 HTML 渲染，而是为已渲染的 HTML 添加行为——大部分情况下，就是跟服务端渲染配合

npm最新周下载量：143,434

github斩获star数：11.2k

2021 JS年度调查报告排名：认知度第十、使用度第十、关注度第八、满意度第八

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

官网：https://stimulus.hotwired.dev/

[图片上传失败...(image-260ba9-1646005867416)]

前端框架现状满意状况

[图片上传失败...(image-5310a0-1646005867416)]

绝大多数人表示还是不错的

后端框架

服务端的JavaScript

[图片上传失败...(image-ded4af-1646005867416)]

Express

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

认知度排名第一、使用度第一、关注度第六、满意度第六

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

github斩获star数：56.1k

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

官网：https://expressjs.com/

[图片上传失败...(image-301609-1646005867416)]

Next.js

一个用于生产环境的React 框架，Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、支持 TypeScript、智能化打包、路由预取等功能无需任何配置

认知度排名第二、使用度第二、关注度第四、满意度第四

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

github斩获star数：82.1k

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

官网：https://nextjs.org/

[图片上传失败...(image-f0ae9c-1646005867416)]

Gatsby

Gatsby 是一个基于 React 的免费、开源框架，用于帮助开发者构建运行速度极快的网站和应用程序

认知度排名第三、使用度第三、关注度第十三、满意度第十三

npm最新周下载量：454,594

github斩获star数：52.4k

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

官网：https://www.gatsbyjs.com/

[图片上传失败...(image-d9f6e2-1646005867416)]

Nuxt

nuxt是一个专注于ui渲染的应用框架，可以快速搭建项目，还提供了服务端渲染的功能

认知度排名第四、使用度第四、关注度第九、满意度第九

npm最新周下载量：393,340

github斩获star数：39.5k

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

官网：https://nuxtjs.org/

[图片上传失败...(image-f5e0c9-1646005867416)]

Nest

Nestjs 是一个构建在Node.js Express服务器之上的现代Web框架

认知度排名第五、使用度第五、关注度第七、满意度第七

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

github斩获star数：44.9k

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

官网：https://nestjs.com/

[图片上传失败...(image-c4527f-1646005867416)]

代码测试工具

认知度排名

[图片上传失败...(image-1b1ba0-1646005867416)]

使用度排名

[图片上传失败...(image-6d8741-1646005867416)]

关注度排名

[图片上传失败...(image-211fd4-1646005867416)]

满意度排名

[图片上传失败...(image-d5ddd5-1646005867416)]

移动端和客户端

用于移动设备和桌面端app的 JavaScript

认知度排名

[图片上传失败...(image-40a4db-1646005867416)]

使用度排名

[图片上传失败...(image-8f89e4-1646005867416)]

关注度排名

[图片上传失败...(image-c5109e-1646005867416)]

满意度排名

[图片上传失败...(image-9454fd-1646005867416)]

构建工具

编译和打包代码

认知度排名

[图片上传失败...(image-c9003b-1646005867416)]

使用度排名

[图片上传失败...(image-3fe2f8-1646005867416)]

关注度排名

[图片上传失败...(image-301aa5-1646005867416)]

满意度排名

[图片上传失败...(image-f6fcad-1646005867416)]

Monorepo 工具

认知度排名

[图片上传失败...(image-891498-1646005867416)]

使用度排名

[图片上传失败...(image-ac5a73-1646005867416)]

关注度排名

[图片上传失败...(image-10850-1646005867416)]

满意度排名

[图片上传失败...(image-a8e7be-1646005867416)]

其他常用工具

工具类库

[图片上传失败...(image-9edac8-1646005867416)]

工具函数库

[图片上传失败...(image-403f9a-1646005867416)]

常用哪个引擎/运行时/执行环境

[图片上传失败...(image-3faff3-1646005867416)]

能编译成JavaScript的语言

[图片上传失败...(image-d439ab-1646005867416)]

受访者

来自

[图片上传失败...(image-5eef31-1646005867416)]

年龄

[图片上传失败...(image-cde108-1646005867416)]

工作几年

[图片上传失败...(image-cf228e-1646005867416)]

薪资

[图片上传失败...(image-4f3fe6-1646005867416)]

常用的 blog 和杂志

[图片上传失败...(image-a22404-1646005867416)]

关注的网站

[图片上传失败...(image-faa07-1646005867416)]

订阅的博客

[图片上传失败...(image-2b8a7b-1646005867416)]

受关注的人

[图片上传失败...(image-71d7e8-1646005867416)]

今年亮点

采用最多的特性和技术

[图片上传失败...(image-2b3dce-1646005867416)]

采用最多的特性

逐年使用率进步前三名的特性

??空值合并运算符
?.
私有属性

采用最多的技术

逐年使用率进步前三名的技术

esbuild
tsc CLI
Testing Library

最高满意度和最受关注的

[图片上传失败...(image-f4fa49-1646005867416)]

最高满意度

满意率前三名的技术

Vite
Testing Library
esbuild

最受关注

Vite
Vitest
esbuild

结语

更多相关内容可以阅读原报告

好了，以上就是本文的所有内容了，如有问题欢迎留言~

JavaScript 2021年度报告新鲜出炉

前言

特性

概览

语言特性

Proxy

简介

使用情况

Promise.allSettled()

简介

使用情况

动态引入

简介

使用情况

??运算符

简介

使用情况

?.运算符

使用情况

私有属性

简介

使用情况

BigInt

简介

使用情况

String.prototype.replaceAll()

简介

使用情况

String.prototype.matchAll()

简介

使用情况

逻辑赋值 &&=

简介

使用情况

Promise.any()

简介

使用情况

Array.prototype.at()

简介

使用情况

浏览器 API

Service Worker

简介

使用情况

Intl

简介

使用情况

Web Audio

简介

使用情况

WebGL

简介

使用情况

Web Animations API

简介

使用情况

WebRTC

简介

使用情况

Web Speech

简介

使用情况

WebSocket

简介

使用情况

Web Components

简介

使用情况

Shadow DOM

简介

使用情况

Page Visibility API

简介

使用情况

Broadcast Channel API

简介

使用情况

Geolocation API

简介

使用情况

逻辑赋值 `&&=`