2020 年 JavaScript 状态调研报告小结.docx

2020 年 JavaScript 状态调研报告小结 一年一度的 Discover the State of JS 2020 results 在前几天新鲜出炉了，每次阅读这份报告都能帮助我快速地了解到 JavaScript 世界在这一年里都发生了哪些事情，同时也给了我一次查漏补缺的机会，让我十分收益。 今年我打算以文字的方式，和大家快速分享一下这份报告在「语法」和「框架」两个部分所释放出的信息，希望能够对大家有所帮助和启发。 今年的调查覆盖率了 137 个国家的 23,765 个人，大多数被调研者来自美国或西欧。报告地址：https://2020./en-US/。 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%）， Atotype.flat()?（39.6%）这样的数据结构和新语法则较少被用在工作之中，BigInt （13.9%）的使用率最低，但一般开发需求中也的确用不上。 有一说一，Atotype.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，仅通过浏览器原生提供的功能就能实现高效可复用的组件化，生命