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') ?? defaultConfig

3. 数据操作的六脉神剑

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 } = c

6. 我的实战心得

1. 代码可读性优先：不要为了炫技写同事看不懂的代码，比如过度嵌套的可选链

2. 渐进式采用：老项目可以先用babel引入这些特性，不必等所有浏览器支持

3. 团队统一规范：比如约定所有异步操作必须用async/await，避免回调地狱

4. 善用TypeScript配合：这些现代语法配合TS类型提示效果更佳

最近在重构老项目时，用这些技巧让代码量减少了40%，而可维护性却大幅提升。特别是可选链和空值合并，消除了无数个防御性判断。记住，好代码不是写给自己看的，而是让接手的人也能轻松理解。