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

前言

哈喽大家好，我是大华。

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

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

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

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

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

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

javascript 复制代码

if (isReady) {
    startApp();
}

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

javascript 复制代码

isReady && startApp();

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

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

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

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

javascript 复制代码

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

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

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

javascript 复制代码

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

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

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

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

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

javascript 复制代码

user.address.street.name;

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

过去需要层层判断：

javascript 复制代码

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

现在只需：

javascript 复制代码

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

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

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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

优势：

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

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

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

对象解构：

javascript 复制代码

// 旧写法
let name = user.name;
let age = user.age;

// 新写法
let { name, age } = user;

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

javascript 复制代码

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

数组解构：

javascript 复制代码

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

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

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

传统函数：

javascript 复制代码

function multiply(a, b) {
    return a * b;
}

箭头函数一行搞定：

javascript 复制代码

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

优点：

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

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

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

合并数组：

javascript 复制代码

// 旧：concat()
let combined = array1.concat(array2);

// 新：扩展运算符
let combined = [...array1, ...array2];

插入元素也方便：

javascript 复制代码

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

合并对象：

javascript 复制代码

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

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

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

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

javascript 复制代码

let found;
for (let i = 0; i < users.length; i++) {
    if (users[i].id === targetId) {
        found = users[i];
        break;
    }
}

现在一行解决：

javascript 复制代码

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

常用方法推荐：

方法	用途
`.find()`	查找第一个匹配项
`.filter()`	过滤出所有符合条件的项
`.map()`	映射新数组
`.some()` / `.every()`	判断是否存在 / 是否全部满足条件
`.includes()`	判断是否包含某值

示例：

javascript 复制代码

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

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

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

javascript 复制代码

let name = '小明';
let age = 25;

// 旧写法
let user = {
    name: name,
    age: age
};

// 新写法
let user = {
    name,
    age
};

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

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

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

javascript 复制代码

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

现在直接用 **：

javascript 复制代码

let result = 2 ** 8; // 256

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

javascript 复制代码

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

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

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

场景一：只在为空时赋值

javascript 复制代码

// 旧写法
if (user.role === null || user.role === undefined) {
    user.role = 'guest';
}

// 新写法
user.role ??= 'guest'; // 等价于 user.role = user.role ?? 'guest';

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

javascript 复制代码

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

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

javascript 复制代码

message += welcomeText; // 原生已有

// 也可以用
message ||= 'default'; // 如果 message 是假值，则赋默认值

小结：

运算符	含义
`??=`	空值合并赋值
`&&=`	逻辑与赋值
`

12. Nullish Coalescing 结合 Optional Chaining

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

例如：

javascript 复制代码

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

解释：

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

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

总结

技巧	关键字/符号
1. 短路运算	`&&`, `
2. 空值合并	`??`
3. 可选链	`?.`
4. 模板字符串	`${}`
5. 解构赋值	`{}`, `[]`
6. 箭头函数	`=>`
7. 扩展运算符	`...`
8. 数组方法	`.find()`, `.map()` 等
9. 属性简写	`{ name }`
10. 指数运算符	`**`
11. 逻辑赋值	`??=`, `&&=`, `
12. 组合技巧	`?.` + `??`

✨ 它们的好处：

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

❗ 但也请注意：

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

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

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

📌往期精彩

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

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

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

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