提升JS代码质量的现代特性与实战技巧
1. 为什么你的JS代码看起来不够专业？
我刚入行时写的JavaScript代码，现在回头看简直不忍直视——满屏的if-else嵌套、重复的null检查、冗长的对象属性访问。直到看到同事的代码才恍然大悟：原来JS还能这么写！今天我们就来聊聊那些让代码瞬间提升逼格的现代JS特性。
这些特性绝非炫技，它们能实实在在解决三类痛点：
- 防御性编程的冗余代码（比如层层判断a && a.b && a.b.c）
- 数据处理的繁琐操作（比如数组去重要写循环）
- 状态管理的模板代码（比如多级对象合并）
2. 空值处理的艺术
2.1 可选链操作符（?.）
以前我们要安全访问深层属性得这么写：
const street = user && user.address && user.address.street现在只需：
const street = user?.address?.street注意：可选链遇到null/undefined会立即停止并返回undefined，不会报错。但在函数调用时要特别注意：
// 正确写法 api.getData?.() // 错误写法（如果getData不存在会报错） api.getData()2.2 空值合并运算符（??）
||运算符的陷阱在于会把0、''、false也当作假值：
const count = 0 const displayCount = count || '暂无' // 会显示"暂无"不符合预期??才是真正的null/undefined检查：
const displayCount = count ?? '暂无' // 正确显示0实战中我常用组合技：
// 配置项优先用传入的，没传用本地存储的，都没有用默认值 const config = userConfig ?? localStorage.getItem('config') ?? defaultConfig3. 数据操作的六脉神剑
3.1 解构赋值的进阶用法
基础用法大家都会：
const { name, age } = user但你可能不知道这些技巧：
// 1. 重命名+默认值 const { name: userName = '匿名' } = {} // 2. 函数参数解构 function sendRequest({ url, method = 'GET' }){...} // 3. 动态属性名解构 const key = 'mobile' const { [key]: phone } = { mobile: '13800138000' }3.2 Set的妙用
数组去重别再写循环了：
const unique = [...new Set([1,2,2,3])] // [1,2,3]我常用的Set场景：
// 1. 权限校验白名单 const allowList = new Set(['admin', 'editor']) if(allowList.has(user.role)){...} // 2. 标签云统计 const tags = [...new Set(articles.flatMap(article => article.tags))]3.3 数组的现代操作
这些方法能让你告别for循环：
// 1. 查找满足条件的最后一项 const lastEven = [1,2,3,4].findLast(x => x % 2 === 0) // 2. 按对象属性分组 const groupByCategory = products.reduce((acc, cur) => { (acc[cur.category] ||= []).push(cur) return acc }, {})4. 容易被忽视的实战技巧
4.1 逻辑赋值运算符
这三个运算符让代码更简洁：
// 1. ||= 当左侧为假值时赋值 user.nickname ||= '匿名用户' // 2. &&= 当左侧为真值时赋值 input.value &&= input.value.trim() // 3. ??= 当左侧为null/undefined时赋值 localStorage.theme ??= 'light'4.2 使用Object.entries处理键值对
比for-in更安全的遍历方式：
const config = { darkMode: true, fontSize: 14 } // 旧写法 for(const key in config){ if(config.hasOwnProperty(key)){ console.log(key, config[key]) } } // 新写法 for(const [key, value] of Object.entries(config)){ console.log(key, value) }4.3 使用Promise.allSettled处理并发请求
比Promise.all更健壮：
const results = await Promise.allSettled([ fetch('/api/user'), fetch('/api/posts') ]) const successfulData = results .filter(p => p.status === 'fulfilled') .map(p => p.value)5. 性能优化与陷阱规避
5.1 慎用展开运算符
大数组展开会有性能问题：
// 创建10万长度数组 const bigArray = new Array(1e5).fill(0) // 耗时操作（约200ms） const copy = [...bigArray] // 更快的方式（约5ms） const fastCopy = bigArray.slice()5.2 可选链的边界情况
虽然可选链很强大，但要注意：
// 1. 不能用于赋值 user?.name = 'Jack' // 报错 // 2. 不能用于构造函数 new User?.() // 报错 // 3. 谨慎用于数组删除 delete arr?.[0] // 语法错误5.3 解构的性能考量
深层解构会影响可读性：
// 不推荐（太深难以维护） const { a: { b: { c: { d } } } } = obj // 推荐（分步解构） const { a } = obj const { b } = a const { c } = b const { d } = c6. 我的实战心得
代码可读性优先：不要为了炫技写同事看不懂的代码，比如过度嵌套的可选链
渐进式采用：老项目可以先用babel引入这些特性，不必等所有浏览器支持
团队统一规范：比如约定所有异步操作必须用async/await，避免回调地狱
善用TypeScript配合：这些现代语法配合TS类型提示效果更佳
最近在重构老项目时，用这些技巧让代码量减少了40%，而可维护性却大幅提升。特别是可选链和空值合并，消除了无数个防御性判断。记住，好代码不是写给自己看的，而是让接手的人也能轻松理解。