2020 年 JavaScript 状态调研报告小结

Posted 2021-08-21 libinfs

一年一度的 Discover the State of JS 2020 results 在前几天新鲜出炉了，每次阅读这份报告都能帮助我快速地了解到 javascript 世界在这一年里都发生了哪些事情，同时也给了我一次查漏补缺的机会，让我十分收益。

今年我打算以文字的方式，和大家快速分享一下这份报告在「语法」和「框架」两个部分所释放出的信息，希望能够对大家有所帮助和启发。

今年的调查覆盖率了 137 个国家的 23,765 个人，大多数被调研者来自美国或西欧。报告地址：https://2020.stateofjs.com/en...。

1. Features

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

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

---

1.1 语法特性

语法特性方面，像 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 开发者不知道会不会感到非常开心？

---

1.2 语言特性

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 方法更好使。

---

1.3 数据结构

数据结构方面，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() 方法中传入参数的方式，显然更加方便。

---

1.4 浏览器 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 世界的表达能力拉高了好几个台阶。我觉的大家真该好好想想如何结合自身的业务场景通过这些浏览器能力寻求更新的突破，说不定下个风口或是交互模式创新就诞生在你的团队。到时候可千万别忘了给我发个红包（笑）。

---

1.5. 其他

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

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

---

2. 技术框架

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