解读 State of JS 2021 | code秘密花园

大家好，我是世奇，笔名 ConardLi。

拖了这么久，JS 生态圈最权威的调查报告 state-of-js 终于是出来了 …

还记得，我为大家解读 2021 年的 state-of-css，是在去年的 12 月份 …

看完了 2021 CSS 年度报告，我学到了啥？

今天，我来带大家看看 2021 年 state-of-js 的调查结果：

速览

下面是我挑出来的几个比较重点的，我们先来速览一下：

可选链操作符使用率已经高达 85%。
空值合并操作符（??）使用率提升了 21%。
将近 50% 的受访者在使用 Shadow DOM API。
esbuild 是满意度调查中同比增长最大的工具。
Vite 满意度高达 97%、Glup 的满意度只有 26% 。
当前有 5.6% 的受访者正在使用 Deno。
一些老牌 JS 库 Axios、Lodash 和 Moment 仍然是最受欢迎的。
TypeScript 是迄今为止最常见的 JavaScript “替代风格”，Elm 位居第二。

JS特性 - 语言

Proxy

Proxy 在各种框架和库中使用的越来越多了（特别是 Vue.js 3.0 开始使用后），所以了解到它的同学也越来越多，但是实际使用率没有太大变化。

Promise.allSettled()

Promise.allSettled() 我还没用过，用法类似于 Promise.all，区别是：它所有给定的 promise 不管是 fulfilled 还是 rejected 状态，只要全部返回后它就会返回。在你不关心所有的异步任务是不是都必须成功的时候可能会用到它。

Dynamic Import

动态导入：只有 15% 的人还不知道它，接近 50% 的小伙伴都用过了，一般会在懒加载的时候用到。

Nullish Coalescing

空值合并运算符：这玩意这么多人都在用吗？用过的小伙伴可以在评论区说一下，我平时用的比较多的还是 || 或者 &&。

空值合并操作符（??），会在左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

和 || 的区别是， || 会在左侧是 0 的时候也返回右侧，而 ?? 会返回 0。

const baz = 0 ?? 42;
console.log(baz); // 0

const conard = 0 ||  42;
console.log(conard); // 42

Optional Chaining

可选链：使用率已经高达 85%，非常实用的特性，不多说了。

Private Fields

私有属性：只有 20% 的人用过，我们在类里面定义的属性或方法默认情况下都是公有的，可以通过在前面加个 # 来变成私有的（仅在类内部可以访问）。

class ClassWithPrivateField {
  #privateField;
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello ConardLi';
  }
}

BigInt

BigInt 可以解决 Number 的精度丢失问题，一般大于 2^53 的数我们建议用 BigInt 来表示，不过现在使用率还很低，大家通常还是用一些库去处理数字。

String.prototype.replaceAll()

replaceAll：可以让我们按照一个正则进行更灵活的字符串替换，第一年参加调查，Chrome85 才开始支持的函数，已经有这么多人用过了，真的是一个非常实用的函数：

1 2	const regex = /ConardLi/ig; console.log(p.replaceAll(regex, '棒！'));

JS特性 - 浏览器 API

Service Workers

Service Worker：一个服务器与浏览器之间的中间人角色，它可以拦截当前网站所有的请求，我们可以在这中间做很多灵活的判断和处理，只有 8% 的人不知道它了，使用率已经高达 45% 。

Intl

Intl 浏览器给我们提供的一个原生的用来做国际化的 API，国际化的需求一般比较复杂，反正我们国际化都是用库，省心很多，这个还没用过。

Web Audio API

控制 Web 音频的 API，只有特定领域的开发者才会用到，变化也不大。

WebGL

Web 图形化的需求越来越复杂多样，WebGL 的普及也不可避免。现在大多数人都有过了解，但是使用者还局限在特定领域，今年的增长率已经有了小的变化，相信未来会迎来一个爆发增长～

Web Animations API

dom 上的 animate 函数，就属于 Web Animations API 中的一个，我们日常使用 CSS 实现的一些动画，都可以借助它转换成 JS 实现：

document.getElementById("CoonardLi").animate(
  [
    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
    { color: '#431236', offset: 0.3 },
  ], {
    duration: 3000,
    iterations: Infinity
  }
);

这个应该大家都有了解过吧，一般 XXX 网页动画实战 这样的课程和文章都会提到，但是实际开发中实现动画还是用 CSS 或者一些 JS 库比较多一点。

WebRTC

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，可以在网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流和（或）音频流或者其他任意数据的传输。

同样，也是特定领域（如直播）会用到的 API，使用者很局限。

Web Speech API

用于处于 Web 音频的 API，也是特定需求场景才会用到的 API，使用率很低，变化也不大。

Websocket

这个调查里使用率最高的 Web API 了，不用多说，只有 4% 不知道它是啥东西了 …

Shadow DOM

Shadow DOM 是 Web Components 里面的一个重要 API：浏览器将模板、样式表、属性、JavaScript 码等，封装成一个独立的 DOM 元素。外部的设置无法影响到其内部，而内部的设置也不会影响到外部，与浏览器处理原生网页元素（比如<video>元素）的方式很像。

Shadow DOM 最大的好处有两个，一是可以向用户隐藏细节，直接提供组件，二是可以封装内部样式表，不会影响到外部。

// attachShadow() creates a shadow root.
let shadow = div.attachShadow({ mode: 'open' });
let inner = document.createElement('b');
inner.appendChild(document.createTextNode('Conard Li Hiding in the shadows'));

// shadow root supports the normal appendChild method.
shadow.appendChild(inner);
div.querySelector('b'); // empty

这个使用率已经这么高了吗？大家在开发里有用到过吗？

Page Visibility API

页面可见性 API，可以帮助我们检测当前用户是不是还在当前页面，当网页被最小化或者切换到其他 tab 的时候，会触发一个 visibilitychange 事件，我们就可以在这个时候去停掉一些耗时的操作来节省资源。

document.addEventListener(visibilityChange, handleVisibilityChange, false);

function handleVisibilityChange() {
  if (document.hidden) {
    // 页面隐藏了
  } else {
    // 页面又活跃了
  }
}