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 ?? light4.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%而可维护性却大幅提升。特别是可选链和空值合并消除了无数个防御性判断。记住好代码不是写给自己看的而是让接手的人也能轻松理解。
)
