索引优化代码
先来看一个简单的例子:
需求是星期回显,传 1 回显 星期一,传 7 回显 星期日,其他类推,无效回显空字符串;类似的需求还有回显月份
第一种实现方法: switch 实现
function previewWeek(i){
switch(i){
case 1:
return '星期一'
break;
case 2:
return '星期二'
break;
case 3:
return '星期三'
break;
case 4:
return '星期四'
break;
case 5:
return '星期五'
break;
case 6:
return '星期六'
break;
case 7:
return '星期日'
break;
default:
return ''
}
}
第二种实现方法: if else 实现
function previewWeek(i){
if(i==1){
return '星期一'
}else if(i==2){
return '星期二'
}else if(i==3){
return '星期三'
}else if(i==4){
return '星期四'
}else if(i==5){
return '星期五'
}else if(i==6){
return '星期六'
}else if(i==7){
return '星期日'
}else{
return ''
}
}
第三种实现方法: 三元实现
function previewWeek(i){
return i==1?'星期一':
i==2?'星期二':
i==3?'星期三':
i==4?'星期四':
i==5?'星期五':
i==6?'星期六':
i==7?'星期日':''
}
第四种实现方法: 数组+索引优化代码
function previewWeek(i){
return i>0 && i<8 ?'星期'+['一','二','三','四','五','六','日'][i-1]:''
}
第五种实现方法: map优化代码
function previewWeek(i){
let weeksMap = new Map([
[1, '一'],
[2, '二'],
[3, '三'],
[4, '四'],
[5, '五'],
[6, '六'],
[7, '日']
]);
return weeksMap.get(i)?'星期'+weeksMap.get(i):''
}
总结:有些时候,重复的代码比较多,我们可以把重复的代码提出来,观察剩下的动态的值,如果可以与索引建立关系更好,可以进一步简化我们的代码
includes 优化代码
includes 是 ES7 新增的API,与 indexOf 不同的是 includes 直接返回的是 Boolean 值,indexOf 则 返回的索引值, 数组和字符串都有 includes 方法
先来看一个简单的例子:以 数组的 includes 为例子,字符串的includes类似,我们来实现一个身份认证方法,通过传入身份Id返回对应的验证结果
一般实现:||
function verifyIdentity(identityId){
if(identityId==1 || identityId==2 || identityId==3 || identityId==4){
return '你的身份合法,请通行!'
}else{
return '你的身份未知,警告!'
}
}
此种写法的缺点是在需要验证的身份Id 变的很多的时候,重复代码量跟着变多
初级优化实现:includes
function verifyIdentity(identityId){
if([1,2,3,4].includes(identityId)){
return '你的身份合法,请通行!'
}else{
return '你的身份未知,警告!'
}
}
此种写法的在需要验证的身份Id 变多的时候,只需要在includes前的数组里后面继续添加就行,缺点是仍然占用4行
最终优化实现:includes + 三元
function verifyIdentity(identityId){
return [1,2,3,4].includes(identityId)?'你的身份合法,请通行!':'你的身份未知,警告!'
}
此种写法个人比较推荐,从维护和扩展方面比较友好
定点优化代码
从一个例子说起:写个查询元素的方法
一般写法
/**
* @param {String } selector : 元素选择器
* @param {Boolean } isAll :是否获取所有
*/
function getElement(selector,isAll = false){
if(isAll){
return document.querySelectorAll(selector)
}else{
return document.querySelector(selector)
}
}
三元写法
function getElement(selector,isAll = false){
return isAll?document.querySelectorAll(selector):document.querySelector(selector)
}
三元定点
动态的数据发生的地点,针对性的优化
function getElement(selector,isAll = false){
return document[ 'querySelector'+(isAll?'All':'') ](selector)
}
不难发现,动态的数据发生在[]里面的小括号里面,通过定点优化进一步减少了我们的代码量,此种衍生的版本比较多
例如:为 container 类元素根据isShow来显示隐藏
// jQuery 中是否经常这么干?
$('.container')[ isShow?'show' : 'hide' ]()
switch语句优化
let color = "red"
function printBlackBackground(){
console.log('black')
}
function printRedBackground(){
console.log('red')
}
function printBlueBackground(){
console.log('blue')
}
function printGreenBackground(){
console.log('green')
}
function printYellowBackground(){
console.log('yellow')
}
switch(color) {
case 'black':
printBlackBackground();
break;
case 'red':
printRedBackground();
break;
case 'blue':
printBlueBackground();
break;
case 'green':
printGreenBackground();
break;
default:
printYellowBackground();
}
待优化部分为switch
我们用对象形式建立key-value映射关系
let colorMap = {
black: printBlackBackground,
red: printRedBackground,
blue: printBlueBackground,
green: printGreenBackground,
yellow: printYellowBackground
}
colorMap[color]? colorMap[color]() : printYellowBackground()
默认值优化
//优化前
function request(options){
let method = options.method?options.method:'GET'
let data = options.data?options.data:{}
//...
}
//优化后
function request(options){
let method = options.method || 'GET'
let data = options.data || {}
//...
}
//基于 ES6 优化后
function request(method='GET',data={}){
//...
}
有些时候我们封装请求,需要准备自己的默认参数,然后与传入的参数进行合并得到最终的请求参数
function request(options){
let opt = Object.assign({
method:'POST',
data:{}
},options)
//opt.data.fxiedProps = 1 ; //有时,请求里需求固定存在一个key值
return opt
}
单个 if 语句优化策略
优化前
function log(){
console.log('前面的flag为真,就会看到我')
}
let flag = true
if(flag){
log()
}
优化后
function log(){
console.log('前面的flag为真,就会看到我')
}
let flag = true
flag && log()
示例2:
if(a && b){
c()
}
//=> 优化后 a && b && c()
//其他类推
此种写法项目中使用较多
单个 if else 带返回值 优化策略
优化前
function demo(flag){
if(flag){
return "真"
}else{
return "假"
}
}
优化后
function demo(flag){
return flag? "真" : "假"
}
单个 if else 执行不同方法 优化策略
从一个例子说起: demo 方法传true执行 success 方法,传 false执行 error方法
function success(){
console.log("success")
}
function fail(){
console.log("fail")
}
function demo(flag){
if(flag){
success()
}else{
fail()
}
}
看了以上多个例子后,你也许会这么优化:
function demo(flag){
flag?success():fail()
}
这个应该是最常用的,true 就执行success,false 就执行 fail
补充一个不常见的
// 如果你不能保证 你所传的参数一定是布尔值的话 用这种
function demo(flag){
[false,true].includes(flag) && [fail,success][Number(flag)]()
}
// false 转成 0 ,对应执行success ,true 转成 1,对应执行 fail
// 如果你能保证 你所传的参数一定是布尔值的话 用这种
function demo(flag){
[fail,success][Number(flag)]()
}
此种优化策略,结合了 布尔值的false和true是可以转成 0 和1,因此可以拿来当索引使用
多个 else-if 带返回值 优化策略
封装一个获取位置的方法:getPosition
优化前
function getPosition(direction){
if(direction == "left"){
return "左"
}else if(direction == "right"){
return "右"
}else if(direction == "top"){
return "上"
}else if(direction == "bottom"){
return "下"
}else{
return "未知"
}
}
优化后
function getPosition(direction){
return ({
left:"左",
right:"右",
top:"上",
bottom:"下"
})[direction] || "未知"
}
多个 else-if 执行不同方法 优化策略
我们做个权限按钮,不同角色登录一个系统,点击同个按钮执行不同的业务逻辑
优化前
let role = 'admin' //模拟登录接口返回的角色
document.querySelector('#btn').addEventListener( 'click' , function(){
if(role == 'admin'){
console.log('管理员点击此按钮执行的业务逻辑')
}else if(role == 'subAdmin'){
console.log('子管理员点击此按钮执行的业务逻辑')
}else if(role == 'mall'){
console.log('商场角色点击此按钮执行的业务逻辑')
}else if(role == 'parkingLot'){
console.log('停车场角色点击此按钮执行的业务逻辑')
}
})
以上代码看上去没有什么问题,从便于维护和管理角度考虑,是需要优化的
优化后
let role = 'admin' //模拟登录接口返回的角色
let btnPermissionsControl = {
admin:function(){
console.log('管理员点击此按钮执行的业务逻辑')
},
subAdmin:function(){
console.log('子管理员点击此按钮执行的业务逻辑')
},
mall:function(){
console.log('商场角色点击此按钮执行的业务逻辑')
},
parkingLot:function(){
console.log('停车场角色点击此按钮执行的业务逻辑')
}
}
document.querySelector('#btn').addEventListener( 'click' , btnPermissionsControl[role] )
优化后,你只需要维护一个对象即可
其他
let flag = a==1? true:false //优化 => let flag = a==1
//如果 变量 flag 用的地方多的话可以用这个 flag 变量保存,
//如果就一两个地方判断使用,建议直接 if (a==1){}
let FLAG = b==1? false:true //优化 => let FLAG = !(b==1)
//此种策略采用取反
//声明多个变量时
var firstName = '王'
var secondName = '儿'
var thirdName = '麻'
var lastName = '子'
// =>
// var firstName = '王',secondName = '儿',thirdName = '麻',lastName = '子'
//字符串拼接 使用 + 号频繁时,用数组的join方法完成
//let result = firstName+sencondtName+threeName+lastName
// =>
//join
let result = [firstName,secondName,thirdName,lastName].join('')
- 尽量使用箭头函数
- 尽量使用模板字符串
- 尽量使用解构赋值
- 尽量使用ES6语法,会发现代码会少很多
留言
您如果发现文中若有不准确或错误的地方,欢迎指出,共同学习