广州蓝景分享—8大Web前端开发的趋势

广州蓝景

于 2023-03-10 17:23:24 发布

阅读量489

点赞数

分类专栏：前端分享知识前端学习文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_43230405/article/details/129446752

版权

2022年StateOfJS调查显示，JavaScript的Proxy、Promise.allSettled()、动态import()等功能的采用率上升。其他前端趋势包括类私有域、空值合并运算符、数字分隔符等。浏览器API如Service Worker和Web Animations API也受到关注。此外，Web组件、WebXR和Web Share API等技术逐渐普及。

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

2023 年 1 月 11 日，2022 年度 StateOfJS 调查结果正式公布！StateOfJS 是前端生态圈中比较有影响力的且规模较大的数据调查。本文就来解读一下 2022 年 StateOfJS 的调查结果！

JavaScript 发展很快，但似乎 JavaScript 开发人员的发展速度更快，因为许多相对较新的功能已经显示出很高的采用率。

概述
这一部分包含语言、浏览器API、其他功能三部分。

外圈的大小对应的是知道某个功能的用户总数（知道+用过的受访者），而内圈代表实际使用过的用户（用过的受访者）。

在这里插入图片描述
在调查提到的所有功能中，受访者的了解程度如下：

下面来详细看看这些功能的用途！

语言
下面先来看看 JavaScript 内置的功能。

（1）Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

（2）Promise.allSettled()

Promise.allSettled()方法以 promise 组成的可迭代对象作为输入，并且返回一个 Promise 实例。当输入的所有 promise 都已敲定时（包括传递空的可迭代类型），返回的 promise 将兑现，并带有描述每个 promsie 结果的对象数组。

（3）动态 import()

静态的 import 语句用于导入由另一个模块导出的绑定。在浏览器中，import 语句只能在声明了 type=“module” 的 script 的标签中使用。而类似函数的动态 import() 不需要依赖 type=“module” 的 script 标签。如果希望按照一定的条件或者按需加载模块的时候，动态 import() 是非常有用的。

（4）类私有域

类属性在默认情况下是公有的，但可以使用增加哈希前缀 # 的方法来定义私有类字段，这一隐秘封装的类特性由 JavaScript 自身强制执行。

（5）空值合并运算符（??）

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。与逻辑或运算符（||）不同，逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，‘’ 或 0）时。

（6）数字分隔符

为了提高数字的可读性，可以使用下划线 (_, U+005F) 作为分隔符：

1_000_000_000_000
1_050.95
0b1010_0001_1000_0101
0o2_2_5_6
0xA0_B0_C0
1_000_000_000_000_000_000_000n

（7）String.prototype.replaceAll()

replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被 replacement 替换。pattern可以是一个字符串或一个 RegExp， replacement 可以是一个字符串或一个在每次匹配被调用的函数，该方法不会改变原始字符串。

（8）String.prototype.matchAll()

matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

（9）逻辑与赋值运算符（&&=）

逻辑与赋值 (x &&= y) 运算符仅在 x 为真时才赋值。

（10）Promise.any()

Promise.any() 接收一个由 Promise 所组成的可迭代对象，该方法会返回一个新的 promise，一旦可迭代对象内的任意一个 promise 变成了兑现状态，那么由该方法所返回的 promise 就会变成兑现状态，并且它的兑现值就是可迭代对象内的首先兑现的 promi