2024年 JavaScript 状态报告解析，前端framework层面试题

最新推荐文章于 2024-11-17 22:31:08 发布

2401_84007049

最新推荐文章于 2024-11-17 22:31:08 发布

阅读量499

点赞数 24

分类专栏： 2024年程序员学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2401_84007049/article/details/137289803

版权

2024年程序员学习专栏收录该内容

214 篇文章 0 订阅

订阅专栏

本文概述了ES6以来的新语法特性使用情况，包括Destructuring、SpreadOperator等广泛使用，但NullishCoalescing和OptionalChaining普及度不高。此外，文章还探讨了语言特性如Async/Await和Promises，以及数据结构和浏览器API的使用情况。同时提到了技术框架，如TypeScript和前端框架Svelte的受欢迎程度。

摘要由CSDN通过智能技术生成

Features

这一部分我将会针对 ES6 以来，新的语法特性的使用情况进行概括和总结，并偶尔发表一些自己的看法，如果您对某个内容有自己的见解，也欢迎您在文章的评论区下方留言。

注意每个语法特性背后的百分数代表着：被调研的开发者中使用过该特性的人数占比。

▐ 语法特性

语法特性方面，像 Destructuring（89.1%）， Spread Operator （92.8%）， Arrow Functions （97.9%）这样便宜好用又大碗的语法特性已经被广大开发者运用的滚瓜烂熟。但是像 Nullish Coalescing （45.3%）， Optional Chaining （66.7%）这样同样好用的不得了的语法特性看起来并没有被普及开来广泛使用，不想代码里再有丑陋的 a && a.b && a.b.c 判断符，直接上手就来一个 a?.b?.c 实在是既潇洒又酷。

毫不意外 Private Fields （10.9%）这个语法特性不仅使用的人不多，而且 43.9% 的被调研开发者表示听都没听说过。我特地去查了下，这个语法特性是 ES2020 草案提出的，目前 Firefox，IE 和 Safari 还不支持。

但是这个语法特性表示 JavaScript 终终终于要有语法层面的私有类字段了，很高兴看到 JavaScript 这门基于原型链的语言在 OOP 范式上又前进了一小步，不知道 Java 开发者不知道会不会感到非常开心？

▐

语言特性

Async/Await （95.2%）， Promises （96.2%）这样的老牌异步解决方案看来已经是耳熟能详，被开发者广泛使用了。但是像 Decorators（47.4%）， Dynamic Import （42.8%）语法使用的人却并不多，至于 Proxies （22.3%） Promise.allSettled() （14.7%）这两个语法则更是不仅使用的人不多，连没听说过的人都不少。

如果说平时写业务很难用到像 Proxy 这样的对象代理方案，用的人少还情有可原。像 Dynamic Import 这种动态加载资源的方案配合上 webpack 打包出异步加载的 chunk 一起使用，绝对是页面性能进一步优化的大杀器，还不了解同学可以深度研究一下。

Promise.allSettled 这个方法终于补齐了 Promise 系列的全家桶，原来的 Promise.all 方法只在异步执行的函数集相互依赖时有效，碰上想要了解每个异步函数解决状态的情况，还是 Promise.allsettled 方法更好使。

▐

数据结构

数据结构方面，Maps （73.4%）， Sets （66.9%）这样的数据结构已经比较广泛的被开发者们使用，而像Typed Arrays （34.9%）， Array.prototype.flat() （39.6%）这样的数据结构和新语法则较少被用在工作之中，BigInt （13.9%）的使用率最低，但一般开发需求中也的确用不上。

有一说一，Array.prototype.flat() 这个方法其实挺好用的，虽然我们可以通过 Spread Operator 快速将一个 2 层嵌套的数组「拍平」变成一个一维数组，但是当我们需要对一个多于 2 层的数组进行「拍平」时，通过向 flat() 方法中传入参数的方式，显然更加方便。

▐

浏览器 API

Local Storage （90.6%）， Fetch （87.1%）这种今年看来已经不再新鲜的 API 毫无疑问大家都在用，也确实在存储和 HTTP 请求上没有什么更好的原生方案。

而 WebSocket 62.6% 的使用率，Service Workers 42% 的使用率和 Intl 31.3% 的使用率也算是合情合理，毕竟受使用场景限制。

Shadow DOM （42.1%），Custom Elements （33.4%）无疑是今年最令人疯狂的浏览器 API 了，想想不通过使用 React 和 Vue，仅通过浏览器原生提供的功能就能实现高效可复用的组件化，生命周期函数什么的也一应俱全，仿佛好不容易学会的 React 好像明天就要过时，JavaScript 原教旨主义者终于一统天下。

可是别高兴的太早，现实还是很骨感，别说现在还没有像 Fusion，Antd 一样成熟的 UI 组件库可以开箱即用，如何通过这些 API 稳定搭建 SPA 应用，整个社区还没有讨论出一个像 React，Vue 和 AngularJS 一样的成熟方案，所以还是先等等吧，先熟悉一下 API 总是没错的。

至于像 Web Audio （20%）， WebGL （17.5%）， Web Animations （16.3%），WebRTC （14%），Web Speech API （8.2%）， WebVR （3.3%）这些只有特定开发需求才会使用的 API，使用的人少也是十分正常，但是可千万不要因此就忽略了这些 API。

像 Web Audio ，Web Speech 和 WebRTC 对于影音视频流的传输和交互就非常重要，WebGL ， Web Animations 和 WebVR 则更是将 Web 世界的表达能力拉高了好几个台阶。我觉的大家真该好好想想如何结合自身的业务场景通过这些浏览器能力寻求更新的突破，说不定下个风口或是交互模式创新就诞生在你的团队。到时候可千万别忘了给我发个红包（笑）。

▐

其他

最后我们再看看 WebAssembly (WASM) 的调研情况，真正使用过的开发者占比为 10.5%，73.9% 的开发者听过但是没用过，15.6% 的开发者则是听都没听说过。

我觉得大多数前端开发者应该都处于听过没用过的象限，目前社区关于 WebAssembly 也确实没有很大的音量。用 C++ 和 Rust 编写 Web 应用这种事情对于 Web 开发者而言也的确没有多大吸引力。未来的发展如何，我还是抱着静观其变的态度。

技术框架

技术框架部分我将重点关注技术框架的使用数量以及对框架的满意程度两个方面，它们代表了当前流行的技术选型以及未来可能流行的技术方向。每一种技术我都会附带 ??? 链接，方便您点击了解更多技术细节。

▐

**语言风格

2020 年对于 JavaScript 究竟应该怎么写才对味这个问题， TypeScript 毫无争议地一锤定音，93% 的参与调研者表示十分满意通过 Typescript 约束自己的 Javascript 代码，看来这个年头还不拥抱 Typescript 的开发者绝对是 out 了。

而对于当前的语言风格是否令人满意的调研则表示，在满分 5 分的限定下，无论是 2019 年还是 2020 年，开发者们都只打了 3.6 分这样差强人意的分数来表达 JavaScript 在更优雅的编写方面还有很多探索的空间。

▐ 前端框架

前端框架方面 React，Angular 和 Vue.js 毫无疑问地依然是世界三大框架。但说出来你可能不信，「最令人满意的前端框架」居然不是 React 而是 2019 年才由 Rich Harris 推出的 Svelte。有 66% 的被调研者表示感兴趣这个框架，并且 89% 的被调研者表示使用这个框架令他们感到十分满意，总之一句话，用过的都说好。

Svelte 人如其名，强调在构建时就直接产出最小的完整的代码，从而在使用时可以直接使用构建后的组件，而无需添加框架自身，因此不仅打包后的应用代码体积更小，由于没有 diff 操作，性能也大幅提高。只可惜目前 Svelte 还不支持 Typescript，也没听说过哪些大型项目在使用，否则众多前端开发er 们可就又有的学了。

▐ 数据层

数据层框架上国外火的一塌糊涂，国内却怎么也火不起来的 GraphQL 依旧是数据层框架排行榜的万年老二，使用最多的状态管理框架依旧是耳熟能详的Redux。沾着 GraphQL 和 React 的光，Apollo Client 近三年来也一直稳稳地占据了排行榜第三名的位置。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。