从公司的code Review 中提升编码能力

1、对于只有一个 if else 并且简单赋值可以用三元表达式优化
修改之前：

优化后：

对于 不变的并且结构很长的这种对象或数组，可以放到一个 ts 文件，通过引入的方式，这样代码看起来会代码更简洁明了

2、用map 映射 替换重复判断的 if else
修改之前：

优化后：

对于重复的 if else 判断，可以用map 结构去优化，这种也是设计模式中的 策略模式 ，这样就会避免代码中大量的 if else 让人看代码的时候头疼

3、将forEach+splice的方式 替换成findIndex+splice
修改之前：

优化之后：

每次写代码的时候不应该只会使用 forEach, 这个场景就 通过 findIndex 直接找到索引, 删除那一项 这样不会像 修改之前那样 每次都要遍历完数组 复杂度会大大降低

4、将判断提前
修改之前：

修改之后

将判断提前,就不用if里面包裹大量逻辑,并且优化性能,当 dataNum 不存在的时候 就不会执行下面的代码了

5、太多重复的对象代码 可以用解构的方式
修之前：

修改之后：

params 参数就是 应用于 form 没必要一个个的赋值过去 可以 可以用 ... 的方式

6、对于大量的 重复类型可以用 Pick、Partial、Omit 等ts 的内置类型 对 一个类型去做 类型提取
修改之前：

修改之后：

这样的的话 尽可能就是对一个大的类型进行收敛 而不是分散的 各种重复的类型

7、避免使用 魔法数字 可使用一个常量 或者枚举去替代
修改之前：

修改之后:

将 魔法数字 120 改成一个常量 加上注释 这样会 清晰很多

8、尽量少的造轮子
修改之前：

修改之后：

这里逻辑是关闭elemnet 之外的 弹框 其实没必要自己手写这种逻辑 而且写不好还有可能有一些奇怪的bug 在vue3 中比较广泛使用的自定义hooks就是 vueuse 大家可以多看看 这种库 不仅提高开发效率 还有利于学习如何编写自定义hooks

总结

如果你是一个刚入行 并且公司只有你一个前端 其实个人觉得 会很难养成一个好的编码习惯 因为没有可以参考的地方，这种情况公司没有大佬 也没有机会组织code Review 那你就可以多看看开源项目 比如 vue3 的 elemnet-plus 、vben、vue3-admin-vite等等，如果你公司有 code Review 的活动请牢牢抓紧它 因为你可以从中获益匪浅！

作者：前端摸鱼杭小哥
链接：https://juejin.cn/post/7303435124527185960