大家好，我是CUGGZ。2023年1月11日，2022年StateOfJS调查结果正式公布！StateOfJS是前端生态系统中具有影响力的大型数据调查。在这篇文章中，我们来解读一下2022StateOfJS调查结果！2022年JS现状调查于2022年11月21日至12月22日进行，共回收问卷39472份。本次调查的目的是确定Web开发生态系统中即将出现的趋势，以帮助开发人员做出技术选择。因此，该调查的重点是预测未来几年会发生什么，而不是分析现在流行什么，这就是为什么没有包括最流行的功能或技术。函数式JavaScript正在快速发展，但似乎JavaScript开发人员的发展速度更快，因为许多相对较新的功能已经显示出很高的采用率。概述这部分包括三个部分：语言、浏览器API和其他功能。外圈的大小对应于知道某项功能的用户总数（知道+使用它的受访者），而内圈代表实际使用它的用户（使用它的受访者）。在调查中提到的所有功能中，受访者的了解程度如下：下面我们来详细了解一下这些功能的用途以及受访者对这个功能的理解和使用情况！我们先来看看JavaScript的内置函数。(1)ProxyProxy对象用于创建一个对象的代理，从而实现对基本操作（如属性查找、赋值、枚举、函数调用等）的拦截和定制。受访者对Proxy的理解和使用情况如下：(2)Promise.allSettled()Promise.allSettled()方法以一个由promises组成的可迭代对象作为输入，返回一个Promise实例。当所有输入的承诺都得到解决（包括传递一个空的可迭代类型）时，返回的承诺将得到履行，并使用一组对象来描述每个承诺的结果。受访者对Promise.allSettled()的理解和使用情况如下：(3)动态import()静态import语句用于导入另一个模块导出的绑定。在浏览器中，import语句只能用在声明了type="module"的script标签中。类似功能的动态import()不需要依赖type="module"的script标签。如果你想根据特定条件或按需加载模块，动态import()非常有用。受访者对dynamicimport()的理解和使用情况如下：(4)Class私有域类属性默认是public的，但是私有类域可以通过加hash前缀#来定义，这是一个secret封装类属性强制执行由JavaScript本身。受访者对类私有字段的理解和使用情况如下：(5)Nullvaluecoalescingoperator(??)Nullvaluecoalescingoperator(??)是逻辑运算符，当左边的操作数为null或undefined时，返回右操作数，否则返回左操作数。与逻辑或运算符(||)不同，逻辑或运算符在左操作数为假时返回右操作数。也就是说，如果你使用||为某些变量设置默认值，您可能会遇到意想不到的行为。比如当false时（例如，''或0）。受访者对空值合并运算符（??）的理解和使用情况如下：（6）数字分隔符为了提高数字的可读性，可以使用下划线（_，U+005F）作为分隔符：1_000_000_000_0001_050。950b1010_0001_1000_01010o2_2_5_60xA0_B0_C01_000_000_000_000_000_000_000n受访者对数字分隔符的理解和使用情况如下：(7)String.prototype.replaceAll()replaceAll()方法返回一个新字符串，新字符串中满足模式的所有部分都被替换。pattern可以是字符串或RegExp，replacement可以是字符串或每次匹配时调用的函数，此方法不会更改原始字符串。受访者对replaceAll()的理解和使用情况如下：(8)String.prototype.matchAll()matchAll()方法返回一个迭代器，包含所有匹配正则表达式和组捕获组的结果。受访者对matchAll()的理解和使用情况如下：(9)逻辑与赋值运算符(&&=)逻辑与赋值运算符(x&&=y)仅当x为真时才赋值。受访者对逻辑和赋值运算符的理解和使用情况如下：(10)Promise.any()Promise.any()接收一个由Promises组成的可迭代对象，该方法返回一个新的promise。一旦可迭代对象中的任何一个promise变为fulfilled，该方法返回的promise就会变为fulfilled，它的fulfillment值就是可迭代对象中第一个promised的promise的实现值。如果iterable对象中的promise最终都没有实现（即所有promise都被rejected），那么这个方法返回的promise就会变成rejected，它的rejectionreason会是一个AggregateError实例，它是分组的ErrorSubclass一起一个单一的错误。注意：Promise.any()方法仍处于试验阶段，尚未得到所有浏览器的完全支持。目前处于TC39Phase4草案（Stage4）中。受访者对Promise.any()的理解和使用情况如下：(11)Array.prototype.at()at()方法接收一个整数值，返回索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。受访者对at()的理解和使用情况如下：(12)Top-levelawait在模块的最顶层，关键字await（异步函数外）可以单独使用。也就是说，如果一个模块中包含一个使用await的子模块，则该模块会等待该子模块，这个过程不会阻塞其他子模块。受访者对顶级await的了解和使用情况如下：(13)TemporalTemporal为ECMAScript语言带来了现代日期/时间API。它具有以下特性：提供易于使用的日期和时间计算API对所有时区的一流支持，包括DST安全算法仅处理表示固定日期和时间的对象解析严格指定的字符串格式支持非公历受访者对Temporal的理解和用法如下：(14)Array.prototype.findLast()findLast()方法返回数组中最后一个满足提供的测试函数条件的元素的值。如果没有找到相应的元素，则返回undefined。受访者对findLast()的理解和使用情况如下：(15)Error.prototype.causeError实例的cause数据属性，用于表示错误的具体原始原因。在使用更具体或有用的错误消息捕获并重新抛出错误时使用它，以便仍然可以访问原始错误。受访者对Error.prototype.cause的理解和使用情况如下：(16)Object.hasOwn()如果指定的对象本身有指定的属性，则静态方法Object.hasOwn()返回true。如果该属性是继承的或不存在，则该方法返回false。Object.hasOwn()旨在取代Object.hasOwnProperty()。受访者对Object.hasOwn()的理解和使用情况如下：(17)正则表达式匹配索引受访者对正则表达式匹配索引的理解和使用如下：浏览器API函数。(1)ServiceWorkerAPIServiceworkers本质上充当Web应用程序、浏览器和网络（如果可用）之间的代理服务器。此API旨在创建高效的离线体验，它拦截网络请求并根据网络可用性采取适当的操作，从服务器更新资源。它还为推送通知和访问后台同步API提供入口点。受访者对ServiceWorkerAPI的理解和使用情况如下：（2）IntlIntl对象是ECMAScript国际化API的命名空间，提供精确的字符串比较、数字格式化、日期时间格式化。Collat??or、NumberFormat和DateTimeFormat对象的构造函数是Intl对象的属性。受访者对Intl的理解和使用情况如下：(3)WebGLWebGL允许支持HTML的canvas标签的浏览器使用基于OpenGLES2.0的API在canvas上创建2D和3D图像，无需安装任何插件。渲染。WebGL程序由用JavaScript编写的控制代码和在图形处理单元中执行的着色代码组成。WebGL元素可以与其他HTML元素混合，可以与网页的其他部分或与网页背景相结合。受访者对WebGL的理解和使用情况如下：(4)WebAnimationsAPIWebAnimationsAPI向开发者开放浏览器动画引擎，并使用JavaScript进行操作。这些API被设计为CSSAnimations和CSSTransitions的接口，未来会补充这些API，丰富更多的功能。使用WebAnimationsAPI，我们可以将交互式动画从样式表转移到JavaScript，将表现与行为分开。受访者对WebAnimationsAPI的理解和使用情况如下：(5)WebRTCAPIWebRTC是一种实时通信技术，允许网络应用程序或站点在浏览器之间建立点对点（Peer-to-peer），无需中介.-to-Peer）连接实现视频流和（或）音频流或其他任意数据的传输。WebRTC中包含的这些标准使用户无需安装任何插件或第三方软件即可创建点对点（Peer-to-Peer）数据共享和电话会议。受访者对WebRTCAPI的理解和使用情况如下：(6)WebSpeechAPIWebSpeechAPI可以将语音数据整合到Web应用中。WebSpeechAPI有两部分：SpeechSynthesis语音合成（文本转语音TTS）和SpeechRecognition语音识别（异步语音识别）。受访者对WebSpeechAPI的理解和使用情况如下：(7)WebSocketAPIWebSockets是一项先进的技术。它在用户的浏览器和服务器之间打开一个交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需轮询服务器以获取响应。受访者对WebSocketAPI的了解和使用情况如下：(8)WebComponentsWebComponents是一组不同的技术，用于创建可重用的自定义元素（它们的功能封装在代码之外）并用于Web应用程序中。受访者对WebComponents的理解和使用情况如下：(9)ShadowDOMWebcomponents的一个重要属性是封装——它可以隐藏HTML的结构、样式和行为，并与页面上的其他代码隔离，保证不同的部分不要混淆，这样可以使代码更干净整洁。其中，ShadowDOM接口是关键，它可以为一个元素附加一个隐藏的、独立的DOM。受访者对ShadowDOM的了解和使用情况如下：(10)页面可见性API使用标签式浏览，任何给定的网页都可能处于后台，因此对用户不可见。页面可见性API提供可以观察到的事件，以了解文档何时可见或隐藏，以及查看页面当前可见性状态的能力。此API通过允许页面在文档不可见时避免不必要的任务来节省资源和提高性能特别有用。受访者对页面可见性API的理解和使用情况如下：(11)BroadcastChannelAPIBroadcastChannelAPI可以实现不同窗口下的浏览器上下文、标签页、frame或iframe下同一源（通常是同一网站）不同之间的简单通信页下）。受访者对BroadcastChannelAPI的理解和使用情况如下：(12)GeolocationAPIGeolocationAPI(GeolocationAPI)允许用户向网络应用程序提供他们的位置。出于隐私原因，在报告地理位置之前请求用户许可。受访者对地理定位API的了解和使用情况如下：(13)文件系统访问API文件系统访问API用于读取、写入和文件管理功能。此功能仅在某些或所有受支持的浏览器的安全上下文(HTTPS)中可用。受访者对文件系统访问API的了解和使用情况如下：(14)WebShareAPIWebShareAPI提供了一种将文本、链接、文件和其他内容共享到用户选择的任何共享目标的机制。受访者对WebShareAPI的理解和使用情况如下：（15）WebXRDeviceAPIWebXR是一组支持渲染3D场景来呈现虚拟世界（virtualreality，也称VR）或在现实世界中添加图形图像的组（增强现实，也称为AR）。WebXR设备API实现了WebXR功能集的核心，管理输出设备的选择，以适当的帧速率将3D场景渲染到所选设备，并管理使用输入控制器创建的运动矢量。受访者对WebXRDeviceAPI的理解和使用情况如下：其他特点(1)ProgressiveWebApps(PWA)PWAs（ProgressiveWebApps，渐进式网络应用）使用现代WebAPI和传统的渐进式增强策略来创建跨平台的Web应用.这些应用程序无处不在且功能丰富，为它们提供了与原生应用程序相同的用户体验优势。受访者对渐进式网络应用程序(PWA)的了解和使用情况如下：(2)WebAssemblyWebAssembly是一种在现代网络浏览器中运行的新编码方式-它是一种低级类汇编语言，具有紧凑的二进制格式，以接近本机的性能运行，并为C/C++等语言提供编译目标，以便它们可以在Web上运行。它还被设计为与JavaScript共存，允许两者一起工作。受访者对WebAssembly的理解和使用情况如下：LibraryOverview下面每一行都是从2016年到2020年，点越高表示使用该技术的人越多，越靠右表示想要学习的人越多；或者已经使用过并且会再次使用它。下表根据保留率（将再次使用该库的用户的百分比）对库进行排名：前端框架让我们来看看保留率、兴趣、使用率和意识率。认知度低于10%的技术被排除在外。各比例定义如下：留存率：会再用/（会再用+不会再用）兴趣率：想学/（想学+不感兴趣）使用率：（会再用+不会'tuseagain）/总知晓率：（总-没听说过）/总留存率如下，可以看出React和Vue的留存率逐年下降：利率：使用率如下,过去四年前端框架的使用率趋向于React持续领先：学习”，“会再做一次”使用）和负面（“不感兴趣”，“不会再使用”）体验，其中条形的粗细表示了解某项技术的受访者数量：用户'其他前端框架的用法如下，可以看出，使用JQuery的用户占了o只有1.9%的受访者：受访者对前端框架现状的满意度如下：渲染框架知识率。RetentionRate:InterestRate:UsageRate:AwarenessRate:受访者对被调查技术随时间变化的看法：下表分为正面（“想学”、“会再用”）和负面（“不感兴趣”、“不会”tuseagain")experiences，其中柱条的粗细表示受访者对某项技术的了解程度：用户对其他渲染框架的使用情况如下：受访者对渲染框架的认知现状满意度如下:测试工具让我们来看看随着时间的推移，流行测试工具的保留率、兴趣、使用率和认知率。保留率：利率：使用率：认知率：受访者对调查技术的看法随着时间的推移：下表分为正数（“想学习”，“会再次使用”）和负面（“不感兴趣”，“不会再使用”）体验，其中条形的粗细表示了解一项技术的受访者数量：用户'使用其他testingtools如下：受访者对测试工具的使用情况现状满意度如下：Mobile&Desktop我们来看看流行的Mobile&Desktop框架/库的留存率、利率、使用率、知晓率随着时间的推移。RetentionRate:InterestRate:UsageRate:AwarenessRate:受访者对调查技术随时间变化的看法：下表分为正面（“想学”、“会再用”）和负面（“不感兴趣”、“不会”tuseagain")experience，其中条的粗细表示了解某项技术的受访者数量：用户对其他移动&桌面库的使用情况如下：受访者desktopframeworks/libraries如下：构建工具我们来看看流行的构建工具随时间的留存率、利率、使用率和认知率。保留率如下。可以看出webpack的留存率在逐年下降。2022年剩下不到70%，而Vite的留存率接近100%。利率：使用率如下，虽然webpack的留存率逐年下降，但仍然是使用最多的构建工具。Vite的采用率较去年大幅提升，未来增长空间很大：负面（“不感兴趣”、“不会再使用”）体验，其中条形的粗细表示了解某项技术的受访者数量：用户使用的其他工具：受访者对构建工具当前状态的满意度为如下：Monorepos工具让我们来看看随着时间的推移，顶级Monorepos工具的保留、兴趣、使用和认知度。RetentionRate:InterestRate:UsageRate:AwarenessRate:受访者对被调查技术随时间变化的看法：下表分为正向（“想学”、“会再用”）和负向（“不感兴趣”、“不会useagain")经验，其中条形的粗细表示了解一项技术的受访者数量：用户使用其他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）：OpinionJavaScriptismovingin正确的方向？可以看出，近年来各个观点都趋于稳定，超过76%的用户认为JavaScript正在朝着正确的方向前进。现在构建JavaScript应用程序太复杂了吗？JavaScript生态系统变化太快了吗？JavaScript的三大痛点：代码架构、依赖管理、状态管理。JavaScript目前缺乏的三个最大特性：静态类型、标准库和更好的日期管理。受访者对当前网络技术的总体满意度如下：调查结果：https://2022.stateofjs.com/en-US/
