💰 点进来就是赚到知识点!本文带你速览《2024 State of JS》调查报告 ,点赞、收藏、评论更能促进消化吸收!
引言
转眼之间又是一年,计算机技术被 AI 拖拽着一溜小跑。临近岁尾,各个大厂不约而同开始冲业绩,先是 Open AI 开启十二天上新连播,然后是 Google 一声不吭猛放大招,发布了 Gemini 2、Whisk、Veo 2…… 也许这场旷日持久的新技术狂欢 party 让你有点累了,那么正好,《2024 State of JS》调查报告刚刚公布了统计结果,我们可以安稳坐下,静静欣赏 JavaScript 这一年又有了怎样的新面貌。
今年的 JS 调查报告收到了 14015 份答卷,从功能特性、库与工具链等多个维度进行了统计。本文将聚焦各个核心数据榜单的 Top5,带大家看看整个 Web 开发者群体都在用什么、期待什么、学习什么。
最常用语法 Top5
Nullish Coalescing 指的是 ?? 运算符,与 || 的不同是,它会把 0 作为有效值来运算,在需要判空的场景非常有用。
Dynamic Import 动态导入:await import('/modules/my-module.js')
Private Properties 私有属性:在定义 class 时声明私有成员:
class Foo {
#bar // 私有
}
Logical Assignment 指的是逻辑或赋值 ||=,用于对空值进行覆盖更新:
let a = '';
let b = 'b';
a ||= 'aa'; // a 的值变为 'aa'
b ||= 'bb'; // b 的值仍为 'b'
Hashbang 注释:在文件首行指定运行参数,如:
#!/usr/bin/env node
console.log("Hello world");
数组方法 Top5
toSorted() 排序,与 sort() 的区别是它不会改变原数组,而是返回一个新数组。
findLast() 返回符合条件的最后一个数组元素。
toReversed() 翻转数组,但不改变原数组,与 toSorted() 类似。
toSpliced() 切片,但不改变原数组。
with() 替换指定序号的元素:
const arr = ['a', 'b', 'c'];
const brr = arr.with(2, 'A')); // ['a', 'b', 'A']
异步方法 Top4
Promise.allSettled() :接收一个 Promise 数组,当数组元素都 fulfill 后,把结果用一个 Promise 包装返回:
const list = [promise1, promise2];
const resPromise = Promise.allSettled(list);
resPromise.then(resList => {...});
Promise.any() :与 allSettled() 类似,但是只要有一个 Promise 可以 resolve 后就返回结果。
Promise.try() :尝试把参数包装成 Promise 返回。
Top-level await:在最外层使用 await。
Set 方法 Top5
union() :取并集。
intersection() :取交集。
difference() :返回新 Set,包含前者有而后者无的元素。
isSubsetOf() :判断是否是子集。
isSupersetOf() :判断是否是超集。
浏览器 API Top5
WebSocket 大幅领先,在 Web App 与云端 AI 交互的场景中,它确实是比较方便的数据传输协议。
PWA 也有近半数的占有率,当然是和国外的应用生态有很大关系的,而国内重 Native 轻 Web,情况就很不一样。
WebGL 仍然坚挺,但相信明年 WebGPU 会赶超上来。
语言痛点 Top5
三成开发者都对 JavaScript 的类型机制很不爽了。
此外浏览器差异、日期时间处理等也是我们的日常痛点。
最感兴趣 Top5
这一部分统计了大家在填完问卷后第一时间想要了解的特性。
error.cause 指的是在抛出错误的地方,用 cause 属性指定错误原因,对堆栈排错很有帮助。
Object.groupBy() 是把结构化的对象数组按照某个属性的值进行分类,值相同的归为一类。
array.fromAsync() 是把一系列异步数据转化为常规数组,类似 Array.from()。
Temporal 是一套新的日期时间 API。
泛前端框架 Top5
这一榜单有多个维度,包括普及率和喜爱程度等等。
webpack 以 85.3% 的使用率位居榜首,但同时有 31% 的人对它持有负面态度。
而 Vite 虽然以使用率 78.1% 位居第三,但却有超半数的开发者表达了对 Vite 的喜爱。
同时,从下面这张排位榜单上,我们能看到所有常用框架各自处于哪个层级:
方法库 Top5
在方法库榜单前五里,竟然有三个都是与处理日期时间相关的,这……充分说明了日期时间确实是比较棘手的数据类型,目前还没有能一发击中要害的银弹。
Zod 是一个校验数据格式的方法库,也算是对 JavaScript 弱类型的弥补。
图形 & 动画库 Top5
这里汇集了图形、图表、动画领域的明星库。图形化是 Web 开发里最能吸引眼球之处,这些库都可以好好玩玩,内化能为我们切图仔的核心竞争力。
后端框架 Top5
Express 仍是一骑绝尘,Koa 因 1% 的差距未能挤进前五。此外 Nest 也占据了三分之一的份额。
运行时 Top5
尽管 Bun.js 和 Deno.js 这两位卷王的出现,让 Node.js 不得不一改安逸和慵懒,爬起来重新营业,但两位后起之秀在 Node.js 的先发优势面前还是追赶得很辛苦。另外 Service Workers 也掌握了一定的话语权,得益于越来越多的 API 对它的支持。
AI 工具 Top5
代码工具对 AI 的集成节奏略慢,所以仍是一众通用型 AI 工具排在了前列。但是明年这个榜单就一定不是这个局面了,除了 Cursor,Windsurf、V0、bolt.new 等等都将杀进来卷起腥风血雨。
部署平台 Top5
你会把你的 Web App 托管到哪里?
Vercel 、Netlify 用起来非常方便、丝滑,AWS 这种老牌名将已经快要优势不在了。此外无门槛的 GitHub Page 和活菩萨 Cloudflare 也位列仙班。
JS & TS 配比
有的人认为 TypeScript 啰嗦累赘,也有的人说它真香。其实不过是因为大家的应用场景不同,所以体感不同。这一部分统计了开发者们在多大程度上使用了 TS,从结果可见 TS 浓度还是挺高的。
AI 代码成分
说实话这个结果还是挺让我吃惊的 —— 统计显示大部分人的日常代码中 AI 生成的都很少。从我个人经验来说,AI 生成代码的比重起码在 30% 以上。而 Claude 前几天公布的生成场景报告里,Web App 生成可是位居榜首的。
JavaScript 痛点 Top5
关于不吐不快的部分,大家的喷点在于大型工程的代码结构、复杂应用的状态管理、依赖维护、性能等等。这些都是 JavaScript 的弱项,但也是 JavaScript 天生自由的特性决定的。
新提案 Top5
除了上文提到的处理日期时间的 Temporal,装饰器、资源管理、JSON 解析等方面的提案是最令大家兴奋的,期待明年能在 ECMAScript 文档里看到它们。
许愿清单 Top5
原生的静态类型支持、标准的常用方法库、信号机制、管道符、对象模式匹配……这些都是呼声最高的 JavaScript todo 清单,如果你也觉得 JavaScript 有所欠缺,那就不要犹豫,直接发起提案,你的需要也是千千万万开发者的需要。
课程资源 Top5
这里列出了开发者们最常用的学习资源,我把链接也贴在这里,方便大家取用:
资讯源 Top5
大家都是从这些来源获取最新资讯的:
结语
OK,以上就是《2024 State of JS》中各个统计维度的榜单。Web 还在持续进化之中,它的繁荣多样背后,也有更迭迅速、繁杂琐碎,仅仅着眼于自身使用经验,很难窥一斑而知全豹。因此,我们需要适时地从日常工作中抽身出来,了解一下不同地域、不同场景的其他 Web 开发者们都在关心什么、使用什么,这样就可以开阔视角、取长补短了。
📣 我是 Jax,在畅游 Web 技术海洋的又一年,我仍然是坚定不移的 JavaScript 迷弟,Web 技术带给我太多乐趣。如果你也和我一样,欢迎关注、私聊!