[TOC] ## 前言 代码优化实践的持续总中 ## 有连续字母的索引返回 针对连续字母以及指针有严格对应关系的，完全可以通过字符串的匹配关系来进行优化。 ``` //优化前 switch (i) { case 0: list.roomName = 'A' break case 1: list.roomName = 'B' break case 2: list.roomName = 'C' break case 3: list.roomName = 'D' break ... } //优化后 const roomNameStr = 'ABCDEFGHIJKLMNOP' list.roomName = roomNameStr.charAt(i) ``` ## 逻辑与与逻辑或 相信大家对&& 以及 || 的符号并不陌生，但对其一些用法可能并不清楚。 ``` // 灵活的赋值过程 ，当某值存在的时候 取值；否则取另外一个值 ，在配置项中经常用 const defaultOptions = {} let options = options ? options : defaultOptions //除了通过三目 也可以通过逻辑或 ,代表优先取第一个值，可以用来优化链式优先级取值的过程 let options = options || defaultOptions //逻辑与 代表取最后一个值 ；当然我们很多时候是判断很多布尔型数据同时满足 let number = 1 && 3 // 觉得很不可思议吧，我们怎么会这么写呢？ //其实是这样的 当多个布尔值并列与的时候，如果前一个为true 则不取值，继续向后判断 ，如果都为true 那么执行去语句，取最后一个为true的值，否则就肯定是false了 // 得到0 当然这时候看你想做的是什么 是取0 还是取布尔型 let a = true && 0 // 如果是前者，建议是这样写的,对于原本非布尔型的为了得到其转换后的布尔型，加双！进行转换即可 let a = true && !!0 // 那么用逻辑与还有另外的妙用，就是条件正确的情况下执行代码,这种就很常见了 option && code here ``` ## 变量相关规范 ### 变量名规范，避免无用的中文注释 ``` // 规范前 let fName = 'jackie'; // 看起来命名挺规范，缩写，驼峰法都用上，ESlint各种检测规范的工具都通过，But，fName是啥？这时候，你是不是想说What are you 弄啥呢？ let lName = 'willen'; // 这个问题和上面的一样 // 规范后 let firstName = 'jackie'; // 怎么样，是不是一目了然。少被喷了一次 let lastName = 'willen'; ``` ### 变量管理 1 无用的变量不要定义 2有用的变量尽可能放在使用作用域，避免后期维护困难 3 全局变量建议单例模式去管理 4 变量分好是变量还是常量 ### 变量赋值兜底 也称为对异常情况的处理，这样的代码会经常写，需要考虑，对空、非正常情况下希望的赋值以及返回。 ``` let len = arr ? arr.length : 0 let str = person.name || '' ``` ### 对于一些常量写好相应的变量来管理 ``` // 优化前 18 代表什么 ? if(age>18){ } // 优化后 const ADULT_AGE = 18 if(age>ADULT_AGE){ } ``` ## 函数规范 ### 函数名说明其用途 一般情况下函数都是一个动词名词的组合，代表一个功能 ### 纯函数 要保证函数所需的变量以及外界条件尽可能少，每次同样的输出得到同样的结果。 ### 单一功能函数 在一个函数中，尽量只实现一个核心功能，不要在一个函数中实现多个功能，要正确准确的实现函数的拆分，函数的复用。 ### 函数传参 每个函数的传参要语义化，可以的话指定其默认值 ### 函数注释 必要写明的几个注释的字段：建议使用jsdoc的相关规范 - 作者：模块维护人 - 入参：几个参数，是否必填，参数数据类型 - 返回参数：返回参数，返回情况 - 主要用途：函数价值，使用场景 ## 针对枚举值的筛选过滤优化 ``` // 优化前 const userRoles = ["角色1","角色2"]; let hasRole = userRoles.includes('小管家') || userRoles.includes('营销部经理') ; // 优化后 const userRoles = ["角色1","角色2"]; let judgeRoleList = ['小管家','营销部经理']; let hasRole = judgeRoleList.some(role =>userRoles.includes(role) ); ``` ##