“为什么同事的代码总比我少一半？为什么他天天准点下班，我却在加班改bug？”
答案很可能是——他偷偷用了JS的『语法糖』！ 这些技巧能让代码瞬间变优雅，开发效率翻倍，摸鱼时间暴增！今天分享10个高频场景下的JS简写技巧，附代码对比，建议收藏后反复练习！

1️⃣ 三行变一行：三元运算符

传统写法（拖进度条版）👇

let access;
if (user.vip) {
    access = '尊享VIP';
} else {
    access = '普通用户';
}

摸鱼写法（一键浓缩版）👇

const access = user.vip ? '尊享VIP' : '普通用户';

适用场景：简单的条件判断，比如权限、状态值渲染。

2️⃣ 防御性编程：可选链（?.）

传统写法（疯狂判空版）👇

const city = user && user.address && user.address.city;

摸鱼写法（优雅防崩版）👇

const city = user?.address?.city || '默认城市';

划重点：再也不用写a&&a.b&&a.b.c了！对象属性不存在时自动返回undefined。

3️⃣ 数组去重：一行代码搞定

传统写法（循环手写版）👇

const arr = [1, 2, 2, 3];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

摸鱼写法（Set魔法版）👇

const uniqueArr = [...new Set(arr)];

适用场景：快速处理重复数据，比如筛选唯一ID列表。

4️⃣ 对象合并：拒绝层层嵌套

传统写法（Object.assign凑数版）👇

const merged = Object.assign({}, obj1, obj2, obj3);

摸鱼写法（解构平铺版）👇

const merged = { ...obj1, ...obj2, ...obj3 };

优势：代码更直观，合并顺序一目了然。

5️⃣ 动态属性名：不用再写奇怪拼接

传统写法（字符串拼接版）👇

const key = 'user_' + id;
const obj = {};
obj[key] = value;

摸鱼写法（模板字符串版）👇

const obj = { [`user_${id}`]: value };

适用场景：动态生成API参数、表单字段。

6️⃣ 默认参数值：告别 || 运算符

传统写法（短路赋值版）👇

function greet(name) {
    name = name || '访客';
    console.log(`你好，${name}`);
}

摸鱼写法（ES6默认值版）👇

const greet = (name = '访客') => console.log(`你好，${name}`);

优势：参数未传递或为undefined时自动生效。

7️⃣ 快速取整：不用记Math方法

传统写法（Math.floor老黄牛版）👇

const num = Math.floor(3.9); // 3

摸鱼写法（位运算魔法版）👇

const num = ~~3.9; // 3 （等效于Math.floor）

注意：仅适用于32位整数，大数慎用！

8️⃣ 短路求值：省一个if语句

传统写法（if判读版）👇

if (isLogin) {
    fetchUserData();
}

摸鱼写法（逻辑与版）👇

isLogin && fetchUserData();

适用场景：简单条件执行，但别滥用哦~

9️⃣ 数字转字符串：隐式转换妙用

传统写法（调用toString版）👇

const str = num.toString();

摸鱼写法（加空字符串版）👇

const str = num + '';

原理：JS自动将数字与字符串拼接转为字符串。

🔟 解构赋值：一键拆解对象/数组

传统写法（逐个赋值版）👇

const name = user.name;
const age = user.age;

摸鱼写法（解构版）👇

const { name, age } = user;

扩展用法：函数参数解构、嵌套对象解构。

🔥 你还有哪些私藏的JS摸鱼技巧？ 欢迎在评论区分享！

JS摸鱼大法：10个超实用的代码简写技巧，让你提前下班！