js中的条件判断

• if - else if - else（多条件判断）使用频率高
• switch - case（多条件判断）使用频率高
• do - while（先执行，后判断）使用频率低
• while（单一判断）使用频率低

上述4种判断逻辑，如果判断嵌套太多我如if或switch我们应该如何优化代码结构

优化方式

• 通过indexOf
• 通过includes
• 通过运算（||、&&、三元表达式）
• 通过策略模式（object、Map）

indexOf

// indexOf 方法描述 返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。 
// 用indexOf判断 
const numberList:Array=[1,2,3,4,5,6]; numberList.indexOf(numder); 
// 该方法要注意 indexOf 返回的是匹配到数据的下标，也就是有可能包含0 
numberList.indexOf(1); //0 
// 对于没有匹配到的数据返回为-1 
numberList.indexOf(99); //-1 
// 具体逻辑使用在没有匹配到的情况下 判断是否为-1
numberList.indexOf(99)!== -1 // false 
// 业务场景：如我有个权限列表在页面上判断是否展示该 
const auth:Array(['ADMIN','STRFF']);
<div v-if='auth.indexOf('ADMIN')'>...</div>

includes(推荐)

// includes 方法描述 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false 
// includes 与 indexOf 用法大致相同 对于indexOf例子修改 
const auth:Array(['ADMIN','STRFF']);
<div v-if='auth.includes('ADMIN')'>...</div>

运算相关

// 三元表达式一般用来赋值 const judge:boolean=true;
// || 一般用来做默认值 (如左值为假则展示右值)
{{judge||'/'}}
const HandelEdit=()=>{ return judge||''} 
// && 一般用来做运行判断 (如左值为真则执行右值) 
judge && HandelEdit();

策略模式

// object 关于店铺vip的打折模式 简单模式 
const gather={ "VIP1":0.9, "VIP2":0.8, "VIP3":0.7, "VIP4":0.6, "default":1 } 
/** 
* @description 折扣计算 
* @param price {number} 价格 
* @param level {string} 会员等级 
* @returns lastPrice {number} 最终价格 
**/ 
const imputedPrice = (price:number,level:string)=>{ 
const discount:number=gather[`${level}`]; const lastPrice:number =discount*price 
return lastPrice 
} 
imputedPrice(500,'VIP2') //400

// Map 复杂模式 工资绩效计算 
const mapGather = new Map([ 
["A", (base) => base * 2], 
['B', (base) => base * 1.5], 
['C', (base) => base] ]) 
/** 
* @description 计算绩效 
* @param level {number} 绩效等级 
* @param base {number} 基础工资` `
* @returns salary {number} 最终工资 
**/ 
const calculateSalary = (level, base) => { 
const salary = mapGather.get(`${level}`)(base) return salary 
} 
calculateSalary("A",10000) // 20000 
calculateSalary("B",10000) // 15000 
calculateSalary("C",10000) // 10000