前端代码优化实用篇
日期：2024-08-26 05:42:58 / 人气：
相信很多小伙伴，在接手别人的二手代码时，是否都有一个感受，一无注释，二无格式，代码冗杂，一个简单的功能用了N个方法实现，顿时感觉，一个脑袋两个大，俗话说好的代码令人赏心悦目，冗杂的代码让人心生不快。个人也是接手了其他同事或是外包或是经过多人手的代码的一点感悟，于是个人总结了以下几个代码优化的方法
先来看一个简单的例子：
需求是星期回显，传 回显 ,传 回显 ,其他类推，无效回显空字符串；类似的需求还有回显月份
第一种实现方法： 实现
第二种实现方法： 实现
第三种实现方法： 三元实现
感觉代码量少了很多，是否我们还可以优化呢？不难发现代码中有很多重复的代码（包括中文）
第四种实现方法： 数组+索引优化代码
总结：有些时候，重复的代码比较多，我们可以把重复的代码提出来，观察剩下的动态的值，如果可以与索引建立关系更好，可以进一步简化我们的代码
感谢 补充了可以用map，集思广益，特地补充 map 优化方法
第五种实现方法： map优化代码
是 ES7 新增的API，与 不同的是 直接返回的是 值， 则 返回的索引值, 数组和字符串都有 方法，具体可以查看 Array.prototype.includes 和 String.prototype.includes
先来看一个简单的例子：以 数组的 为例子，字符串的类似
我们来实现一个身份认证方法，通过传入身份Id返回对应的验证结果
一般实现：||
此种写法的缺点是在需要验证的身份Id 变的很多的时候，重复代码量跟着变多
初级优化实现：includes
此种写法的在需要验证的身份Id 变多的时候，只需要在includes前的数组里后面继续添加就行，缺点是仍然占用4行
最终优化实现：includes + 三元
此种写法个人比较推荐，从维护和扩展方面比较友好
从一个例子说起：
写个查询元素的方法
一般写法
三元写法
三元定点
动态的数据发生的地点，针对性的优化
不难发现，动态的数据发生在[]里面的小括号里面，通过定点优化进一步减少了我们的代码量，此种衍生的版本比较多
例如：为 类元素根据来显示隐藏
示例：
待优化部分为switch
我们用对象形式建立key-value映射关系
备注：此种方法借鉴于其他网友
优化前
优化后
基于 ES6 优化后
有些时候我们封装请求，需要准备自己的默认参数，然后与传入的参数进行合并得到最终的请求参数
优化前
优化后
示例2：
此种写法项目中使用较多
优化前
优化后
此种策略采用 归并达到相同结果的 不同条件，从而进行了优化
优化前
优化后
排非策略，此种策略优先排除false情形，通过则后面执行 true 情形的 业务逻辑
优化前
优化后
从一个例子说起： demo 方法传执行 方法，传 执行 方法
看了以上多个例子后，你也许会这么优化：
这个应该是最常用的， 就执行， 就执行
补充一个不常见的
此种优化策略，结合了 布尔值的false和true是可以转成 0 和1，因此可以拿来当索引使用
封装一个获取位置的方法：
优化前
优化后
我们做个权限按钮，不同角色登录一个系统，点击同个按钮执行不同的业务逻辑
优化前
以上代码看上去没有什么问题，从便于维护和管理角度考虑，是需要优化的
优化后
优化后，你只需要维护一个对象即可
有些时候，后端返回的数据里动态存在某个值，也就意味着，有时候有这个数据，有时候没有，然后甩你一句话，“有就显示，没有就不显示”，作为前端的我们自然很严谨
场景：后端大哥说了，给你返回的数据里面的 如果有 字段，并且下面有字段并且有值就显示 里面的内容，否则页面 这一块不显示
模拟后端返回的数据
前端的严谨写法
用 进行优化
第一种优化写法
第二种优化写法
第三种优化写法
此种适合，严谨但又懒的前端
此种采用 策略
第四种优化写法
感谢 小伙伴的建议，特此新增此例，感兴趣的小伙伴可以去看看这个特性
optional chaining优化，新特性，目前最新版的谷歌浏览器已经可以体验，后期应该会加入到 标准中去
- 尽量使用箭头函数
- 尽量使用模板字符串
- 尽量使用解构赋值
- 尽量使用ES6语法，会发现代码会少很多
dom 绑定事件优化，以下示例效果上点击那个dom 就弹出对应的数字（type）
如果我们不想 dom 身上 直接绑定事件呢
利用 bind 改变this指向（第一个参数不改变传null即可，后面穿参数即可），并且不会立即执行
2021/12/25 补充
场景： 利用ES6剩余参数取你所想取的数据
数组剩余参数的巧用
2022/11/21 补充
场景： 对一个数组需要先过滤再单独处理每一项
示例场景：对 数组进行过滤出奇数后再对过滤后的数组的每一项乘以3 后返回该数组
正常操作
那么有没有那么一个api 直接可以把两件事都做了呢，答案是有的，它就是人见人爱的
2022/11/28 补充
平时我们会封装很多方法，在参数这块是否有所技巧来处理呢
场景： 参数是一个配置对象，里面的属性都是可有可无，没有传的使用默认值，传了的则使用传的值
有没有办法让 或 的出现的更优雅呢，由于他们的返回值 找到就是大于等于0，找不到就是-1，我们可以利用
如果你有更好的点子，欢迎留言
文中若有不准确或错误的地方，欢迎指出
往期文章 ：前端开发中实用的工具方法
