frontend-tips 代码质量篇早返回、魔法数字等6种写法写出可维护的代码【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tipsfrontend-tips 是一个前端开发技巧与最佳实践合集覆盖 JavaScript、CSS、HTML 等常见主题。这篇文章从「代码质量」视角出发精选其中 6 种实用写法——早返回、告别魔法数字、查找表、Array.includes、避免布尔参数、严格相等——帮助新手写出易读、易维护的代码。 6种写法一览写法解决的问题适用场景早返回Early Returnif/else 嵌套过深条件分支多的函数消灭魔法数字数字含义不明字符串截取、日期计算查找表Lookup Table一长串 if/else值到值的映射Array.includes冗长的多条件判断判断属于某一组避免布尔参数调用方看不懂 true/false 含义函数 API 设计严格相等隐式类型转换的坑一切变量比较1️⃣ 早返回告别深层嵌套的 if/else新手最常踩的第一个坑一层套一层的else嵌套。分支越多代码越难读。早返回Early Return的核心思想很直白条件满足时立刻return退出函数后面就不再需要else了。// 改前嵌套越深越难读 if (hour 0) { if (hour 12) { return hour am; // ...更多分支 } } // 改后条件命中即返回层层扁平化 if (hour 0) { return 12am; } if (hour 12) { return hour am; } return hour % 12 pm;改动后的函数像一份清单逐条检查、逐条返回主流程一目了然也更容易补充测试用例。 细节来源contents/early-return.mdx2️⃣ 告别魔法数字给数字一个名字或算式当你写下date.toISOString().slice(0, 10)时别人包括三个月后的你自己很难立刻明白10是哪里来的——这就是魔法数字Magic Number。有两种轻量解法用常量解释来源slice(0, YYYY-MM-DD.length)一眼看懂是完整日期的长度。保留计算过程毫秒数算天数时写/ 1000 * 60 * 60 * 24比直接写/ 86400000更自解释。如果这个数字会在多处复用就声明为具名常量如MILLISECOND_DAY在文件顶部统一维护。 细节来源contents/do-not-use-magic-numbers-when-manipulating-strings.mdx、contents/keep-the-calculation-of-a-magic-number.mdx3️⃣ 查找表用一张表替代一长串 if如果一堆if只是在把输入映射到固定的输出比如星期几对应英文名其实一张查找表就够了// 一长串 if / else if... if (day 0) { weekDay Sunday; } else if (day 1) { weekDay Monday; } // ... // 查找表一行搞定 const lookup [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]; const weekDay lookup[day];查找表可以是数组、对象或Map取决于你的映射关系。它没有副作用、易测试新增映射项时也不用再改逻辑分支。 细节来源contents/replace-multiple-if-statements-with-a-lookup-table.mdx4️⃣ Array.includes把多个条件压成一句判断某值是否属于一组时||连成一排是最初的写法// 冗长判断月份是否为 4/6/9/11 月 if (month 3 || month 5 || month 8 || month 10) { ... } // 简洁一个 includes 搞定 if ([3, 5, 8, 10].includes(month)) { ... }Array.includes让意图在这些里面直接写在了代码里增删成员也只改数组不改逻辑。 细节来源contents/use-array-includes-for-multiple-conditionals.mdx5️⃣ 避免布尔参数让函数调用自解释这样的调用方式你一定见过writeToFile(content, file, true); // true 是覆盖还是追加布尔参数让调用方必须翻进函数实现才能确认含义参数一多更是灾难。三种常见改进方式拆成显式方法appendToFile(...)/overrideFile(...)名字即文档改为对象参数writeToFile(content, file, { override: true })意图清晰且方便按需省略TypeScript 中使用枚举SaveMode.Append/SaveMode.Override取值合法且 IDE 可提示。 细节来源contents/avoid-boolean-parameters.mdx6️⃣ 始终使用严格相等这是成本最低、收益最稳定的一条规则。宽松相等会先做隐式类型转换再比较结果经常出人意料0 false; // true 0 []; // true 0 ; // true而严格相等同时比较值和类型行为可预期。团队里只需一条约定比较变量一律用。 细节来源contents/use-the-strict-equality-operator-when-comparing-variables.mdx 附赠短路与条件式想省掉一层if包裹逻辑与就能表达条件成立才执行formValid submitForm();在 React 等框架的模板里同样的语法还能用来做条件渲染是配合早返回思路的好帮手参见 contents/use-short-circuits-conditionals.mdx。✅ 总结6种写法如何落地场景记住这一句分支多、嵌套深条件命中就早返回别让else套娃代码里冒出裸数字给数字起名字或保留它的计算式一长串 if 在查值换成查找表一行查完一排\|\|判断归属一个Array.includes解决函数带true/false参数换成显式方法、对象参数或枚举比较两个变量永远用不用这些写法都源自 frontend-tips 的 tips 合集全部文章存放在仓库的 contents 目录下每篇都是一句话场景 一个最小示例建议收藏后日常按需查阅把可维护性一点点写进自己的肌肉记忆里。【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tips创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 frontend-tips 代码质量篇：早返回、魔法数字等6种写法，写出可维护的代码
frontend-tips 代码质量篇早返回、魔法数字等6种写法写出可维护的代码【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tipsfrontend-tips 是一个前端开发技巧与最佳实践合集覆盖 JavaScript、CSS、HTML 等常见主题。这篇文章从「代码质量」视角出发精选其中 6 种实用写法——早返回、告别魔法数字、查找表、Array.includes、避免布尔参数、严格相等——帮助新手写出易读、易维护的代码。 6种写法一览写法解决的问题适用场景早返回Early Returnif/else 嵌套过深条件分支多的函数消灭魔法数字数字含义不明字符串截取、日期计算查找表Lookup Table一长串 if/else值到值的映射Array.includes冗长的多条件判断判断属于某一组避免布尔参数调用方看不懂 true/false 含义函数 API 设计严格相等隐式类型转换的坑一切变量比较1️⃣ 早返回告别深层嵌套的 if/else新手最常踩的第一个坑一层套一层的else嵌套。分支越多代码越难读。早返回Early Return的核心思想很直白条件满足时立刻return退出函数后面就不再需要else了。// 改前嵌套越深越难读 if (hour 0) { if (hour 12) { return hour am; // ...更多分支 } } // 改后条件命中即返回层层扁平化 if (hour 0) { return 12am; } if (hour 12) { return hour am; } return hour % 12 pm;改动后的函数像一份清单逐条检查、逐条返回主流程一目了然也更容易补充测试用例。 细节来源contents/early-return.mdx2️⃣ 告别魔法数字给数字一个名字或算式当你写下date.toISOString().slice(0, 10)时别人包括三个月后的你自己很难立刻明白10是哪里来的——这就是魔法数字Magic Number。有两种轻量解法用常量解释来源slice(0, YYYY-MM-DD.length)一眼看懂是完整日期的长度。保留计算过程毫秒数算天数时写/ 1000 * 60 * 60 * 24比直接写/ 86400000更自解释。如果这个数字会在多处复用就声明为具名常量如MILLISECOND_DAY在文件顶部统一维护。 细节来源contents/do-not-use-magic-numbers-when-manipulating-strings.mdx、contents/keep-the-calculation-of-a-magic-number.mdx3️⃣ 查找表用一张表替代一长串 if如果一堆if只是在把输入映射到固定的输出比如星期几对应英文名其实一张查找表就够了// 一长串 if / else if... if (day 0) { weekDay Sunday; } else if (day 1) { weekDay Monday; } // ... // 查找表一行搞定 const lookup [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]; const weekDay lookup[day];查找表可以是数组、对象或Map取决于你的映射关系。它没有副作用、易测试新增映射项时也不用再改逻辑分支。 细节来源contents/replace-multiple-if-statements-with-a-lookup-table.mdx4️⃣ Array.includes把多个条件压成一句判断某值是否属于一组时||连成一排是最初的写法// 冗长判断月份是否为 4/6/9/11 月 if (month 3 || month 5 || month 8 || month 10) { ... } // 简洁一个 includes 搞定 if ([3, 5, 8, 10].includes(month)) { ... }Array.includes让意图在这些里面直接写在了代码里增删成员也只改数组不改逻辑。 细节来源contents/use-array-includes-for-multiple-conditionals.mdx5️⃣ 避免布尔参数让函数调用自解释这样的调用方式你一定见过writeToFile(content, file, true); // true 是覆盖还是追加布尔参数让调用方必须翻进函数实现才能确认含义参数一多更是灾难。三种常见改进方式拆成显式方法appendToFile(...)/overrideFile(...)名字即文档改为对象参数writeToFile(content, file, { override: true })意图清晰且方便按需省略TypeScript 中使用枚举SaveMode.Append/SaveMode.Override取值合法且 IDE 可提示。 细节来源contents/avoid-boolean-parameters.mdx6️⃣ 始终使用严格相等这是成本最低、收益最稳定的一条规则。宽松相等会先做隐式类型转换再比较结果经常出人意料0 false; // true 0 []; // true 0 ; // true而严格相等同时比较值和类型行为可预期。团队里只需一条约定比较变量一律用。 细节来源contents/use-the-strict-equality-operator-when-comparing-variables.mdx 附赠短路与条件式想省掉一层if包裹逻辑与就能表达条件成立才执行formValid submitForm();在 React 等框架的模板里同样的语法还能用来做条件渲染是配合早返回思路的好帮手参见 contents/use-short-circuits-conditionals.mdx。✅ 总结6种写法如何落地场景记住这一句分支多、嵌套深条件命中就早返回别让else套娃代码里冒出裸数字给数字起名字或保留它的计算式一长串 if 在查值换成查找表一行查完一排\|\|判断归属一个Array.includes解决函数带true/false参数换成显式方法、对象参数或枚举比较两个变量永远用不用这些写法都源自 frontend-tips 的 tips 合集全部文章存放在仓库的 contents 目录下每篇都是一句话场景 一个最小示例建议收藏后日常按需查阅把可维护性一点点写进自己的肌肉记忆里。【免费下载链接】frontend-tipsSuper tiny, quick tips, tricks and best practices of front-end development项目地址: https://gitcode.com/gh_mirrors/fr/frontend-tips创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考