前端必看！12个JS神级简写技巧，代码效率直接飙升80%，告别加班！

前言

哈喽大家好，我是大华。

在日常开发中，我们经常会遇到一些重复、冗长的代码。写起来费劲，读起来费神，维护起来更是头疼。而且代码越复杂，性能可能越受影响。

那有没有办法让代码更简洁、清晰又高效呢？

JavaScript提供了许多现代语法特性，合理使用这些简写技巧，不仅能大幅减少代码量，还能提升可读性和执行效率。

很多资深前端都在用，这篇文章整理了 12 个最实用的 JS 简写技巧，并结合实际场景进行优化和补充，帮助你写出更优雅的代码。

1. 短路运算符：替代简单的 if 判断

以前我们这样写条件判断：

1if (isReady) {
2    startApp();
3}
4

现在可以用逻辑与（&&）的短路特性简化为一行：

1isReady && startApp();
2

适用场景：当 isReady 为真值时才执行函数。

注意：仅适用于简单条件，避免滥用导致可读性下降。

2. 空值合并运算符（??）：精准设置默认值

传统做法是用 || 设置默认值：

1let name = username || '默认用户';
2

但问题来了：如果 username 是 0、'' 或 false，也会被替换成默认值 —— 这通常不是我们想要的。

推荐使用空值合并运算符：

1let name = username ?? '默认用户';
2

只有当 username 是 null 或 undefined 时才会使用默认值，其他“假值”如 0、'' 都会被保留。

最佳实践：处理 API 返回数据或配置项时特别有用。

3. 可选链操作符（?.）：安全访问深层属性

想获取一个嵌套对象的属性：

1user.address.street.name;
2

但如果 user 或 address 不存在，就会抛出错误。

过去需要层层判断：

1const streetName = user && user.address && user.address.street && user.address.street.name;
2

现在只需：

1const streetName = user?.address?.street?.name;
2

如果任意一层为 null/undefined，返回 undefined 而不会报错。

支持方法调用：obj.method?.() 和数组索引：arr?.[index]

4. 模板字符串：字符串拼接

老式拼接方式容易出错且难看：

1let message = 'Hello, ' + name + '! 你的余额是 ' + balance + ' 元。';
2

用模板字符串（反引号）清爽多了：

1let message = `Hello, ${name}! 你的余额是 ${balance} 元。`;
2

优势：

• 支持换行
• 内嵌表达式 ${}
• 更易维护

5. 解构赋值：快速提取数据

从对象或数组中取值，再也不用手动赋值了。

对象解构：

1// 旧写法
2let name = user.name;
3let age = user.age;
4
5// 新写法
6let { name, age } = user;
7

还可以重命名、设默认值：

1let { name: userName, age = 18 } = user;
2

数组解构：

1let [first, second] = list;
2let [, , third] = list; // 跳过前两个元素
3

常用于函数参数解构、React 中的状态提取等。

6. 箭头函数：更简洁的函数定义

传统函数：

1function multiply(a, b) {
2    return a * b;
3}
4

箭头函数一行搞定：

1const multiply = (a, b) => a * b;
2

优点：

• 语法简洁
• 不绑定自己的this，适合事件回调、.map() 等场景

注意：不要在对象方法或需要动态this的地方使用（比如 DOM 事件监听器），否则this指向会出问题。

7. 扩展运算符（...）：轻松合并与复制

合并数组：

1// 旧：concat()
2let combined = array1.concat(array2);
3
4// 新：扩展运算符
5let combined = [...array1, ...array2];
6

插入元素也方便：

1let newArr = [...array1, newItem, ...array2];
2

合并对象：

1let config = { ...defaultConfig, ...userConfig };
2

注意：扩展运算符是浅拷贝！嵌套对象仍共享引用。

8. 数组高阶函数：替代 for 循环

遍历查找元素，过去常用 for 循环：

1let found;
2for (let i = 0; i < users.length; i++) {
3    if (users[i].id === targetId) {
4        found = users[i];
5        break;
6    }
7}
8

现在一行解决：

1let found = users.find(user => user.id === targetId);
2

常用方法推荐：

示例：

1// 获取所有活跃用户的名字
2const activeNames = users
3  .filter(u => u.isActive)
4  .map(u => u.name);
5

9. 对象属性简写：变量名即属性名

当变量名与属性名一致时，无需重复书写：

1let name = '小明';
2let age = 25;
3
4// 旧写法
5let user = {
6    name: name,
7    age: age
8};
9
10// 新写法
11let user = {
12    name,
13    age
14};
15

特别适合构建 API 请求体、返回对象等场景。

10. 指数运算符（**）：更直观的幂运算

以前计算幂要用 Math.pow()：

1let result = Math.pow(2, 8); // 256
2

现在直接用 **：

1let result = 2 ** 8; // 256
2

更接近数学表达习惯，支持负指数：

1let half = 2 ** -1; // 0.5
2

11. 逻辑赋值运算符：结合条件与赋值

ES2021 引入了三个逻辑赋值运算符，能进一步简化赋值逻辑。

场景一：只在为空时赋值

1// 旧写法
2if (user.role === null || user.role === undefined) {
3    user.role = 'guest';
4}
5
6// 新写法
7user.role ??= 'guest'; // 等价于 user.role = user.role ?? 'guest';
8

场景二：只有当前值为真才更新

1user.isAdmin &&= false; // 若 isAdmin 为真，则设为 false
2

场景三：拼接字符串或累加

1message += welcomeText; // 原生已有
2
3// 也可以用
4message ||= 'default'; // 如果 message 是假值，则赋默认值
5

小结：

12. Nullish Coalescing 结合 Optional Chaining

将 ?. 和 ?? 结合使用，可以构建极其健壮的数据访问逻辑。

例如：

1const displayName = user?.profile?.name ?? '匿名用户';
2

解释：

• 先通过可选链安全访问 name
• 如果结果是 null 或 undefined，则返回默认值

应用于表单默认值、UI 渲染 fallback 等非常合适。

总结

✨ 它们的好处：

• 减少代码量
• 提升可读性（适度使用）
• 增强健壮性（如 ?. 和 ??）
• 更贴近现代 JS 编码规范

❗ 但也请注意：

• 不要为了使用而过度简化
• 团队协作中确保成员都熟悉这些语法
• 在关键路径上优先保证可读性和可调试性

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、转发！

公众号：程序员刘大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！

📌往期精彩

《Java8 都出这么多年了，Optional 还是没人用？到底卡在哪了？》

《90%的人不知道！Spring官方早已不推荐@Autowired？这3种注入方式你用对了吗？》

《别再写 TypeScript enum了！新枚举方式让 bundle 瞬间小20%》

《Vue3 的 ref 和 reactive 到底用哪个？90% 的开发者都选错了》

《前端必看！12个JS神级简写技巧，代码效率直接飙升80%，告别加班！》 是转载文章，点击查看原文。