相信许多小伙伴，在接手别人的二手代码时，是否都有一个感受，一无注释，二无格局，代码冗繁，一个简单的功用用了N个办法完结，顿时感觉，一个脑袋两个大，俗话说好的代码令人赏心悦目，冗繁的代码让人心生不快。个人也是接手了其他搭档或是外包或是经过多人手的代码的一点感悟，所以个0 ! ~ k e人总结了以下几个代码优化的办法
索引优化代码
先来看一个简单的例子：
需求9 + v T I t 1 X是星期回显，传
1回显o L _ k t } n Y M星期一,传7回显周日,其他类推，无效回显空字符串；相似的需求还有回显月份
第0 Y N H n a一种完结办法： switch 完结
function previewWeek(i){
switch(i){
case 1:
return. ) [ '星期一'
brl W Q i @ qeak;
case 2:
returnd , s q '星期二'
break;
case 3:
return '星期三'
break;
case 4:
return '周四'
break;
case 5:
return '星期五'
break;
case 6:
return '星期六'
break;
casee , N R % S 4 & 7:
return '周日'
break;
default:
return ''
}
}
第二种完结办法： if else 完结
function previewWeek(i){
if(i==1){
return '星K Y * r ^ T +期一'
}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 ''
}
}
第三种完结办法： 三元完结
functg + : T L pion previewWeek(i){
return i==1?'星期一':
i==2?'星期二':
i==3?'星期三':
i==4?'周四':
i==5?'星期五':
i==6?'星期六':
i==7?'周日':''
}
感觉代码量u F C P L v少了许多，是否咱们还能够优化呢？不难发现代码中有许多重复的代码（包括中文）
第四种完A , B I C I g结办法： 数组+索引优化代码
function previU s R l ] u , JewWeek(i){
return i>0 &&+ U E * i m i aamp; i<8 ?'星期'+['一','二Z = 1 T','三','四'_ _ i H /,'五','六','日'][i-1]:''
}
总结：有些时分，重复的代码比较多，咱们能够把重复H 8 K 3 q的代码提出来，调查剩下的动态的M 8 G r ; X V值，假如能够0 Z # 9 * y v与索引树立联系5 ` 9 !更好，能够进一步简化咱们的代码
感谢 CherishXY web前端 弥补了能够用map，群策群力，特地弥补 map 优化办法
第五种完结办法： map优化代码
function previewWeek(i){
let weeksMap = new Map([
[1, '一']x W ] 8 7,
[2, '二'],
[3, '三'],
[4, '四'],
[5, '五'],
[6, '六'],
[7, '日']
]);
return weeksMap^ , = | { ^ N.get6 0 M *(i)?'星期'+weekP D S 9 R QsMap.get(i):''
}
includes 优化代码
includes是 ES7 新增的API，与indexOf不同的是includes直接回来的是Boolean值，indexOf则 回来的索引值, 数组和字符B 5 * D 5 G !串都有includes办法，具体能够检W { u | # T )查 Array.prototype.includes 和 String.prototype.includes
先来看一个简单的例子Z $ # j 6 2 k ：以 数组的 includ$ , 6 f P ? ues 为例子，字符串的includes相似
咱们来完结一个身% ` D 0份认证办法，经过传入身份Id回来对应的验证成4 t . g & Y % j果
一般完结：||
function verifv V 1 M @ ]yIdentity(identityId){
if(idT 5 h W t -entityId==1 || identityId==; : W G j ( Y2 || identityId==3 || identityId==4){
reA F E O O vturn '你的身份合法，请通$ X m ( n行！'
}elJ f m t 0 | X I -se{
return '你的身份不知道，正告！'
}
}
此种写法的缺点是在需求验证的身份Id 变的许多的时分，重复代码量^ p ! 4 B 7 u c H跟着变多
初级优化完结：includes
function verifyIdentity(identityId){
if([1,2,3,4].includes(identityId)){
return '你B = P |的身份合法，请通行！'
}else{
return '你的身份不知道，正告！'
}
}
此种写法的在需求验证的身份Id 变. F : W # n I多的时分，只需求在includes前的数组里R E l 6后面持续添加E W * 0 6就行，缺点? ] / % F是依然占用4行
终究优化完结：includes + 三元
function verifyIdentity(identityId){
return [1,2,3,4].includes(identityId)?'你的身份合法，请通行！':'你的身份不知道，正告！'
}
此种写法个人比较引荐，从保护和扩展方面比较友爱
定点优化代码
从一i m * L ) k I s k个例子说起：
写个查` J / Q z 7 询元素的办法
一般写法
/**
* @param {String } s2 9 ;elector : 元素选择器
* @param {Boolean } isAll ：是否获取一切
*/
function getElement(selector,isAll = false){
if(ih R , a KsAll){
return& % ~ d( z R W x Jocument.querySelectorAll(selector)
}else{
return document.querySele2 , X yctor(selector)
}
}
三元写法
function getElement(selector,isAll = false){t 0 S p
retuO B P o !rn isAll?document.querySelectorAll(selector):documu + X T / i s M jent.querySelector[ 9 W H(selector)
}
三元定点
动态的数据发E T . B V P t生的地址，针对性的优化
function getElement(selector,isAll = false){
return document[ 'querySelector'+(isAll?'All':'') ]* 1 7 K A V . 0(selector)
}
不难发现，动态的数据发生在[]里边的小括号里边，经过定点优化进一步减少了咱们的代码量，此种衍生的版别比较多
例如：为 conW ! ] P _ = )tainer 类元素根据isShow来显现躲藏
// jQuery 中是否常常这么干？
$('.container')[ isShow?'show' :# Z D X 0 S 'hide' ]r ( k u k n()
swiL ^ D Ttch句子优化
示例：
let color = "red"
functo uion printBlax l [ } 2ckBackground(){
console.log('black')
}
function printRedBackground(){
console.log('red')
}
function printBlueBackground(){
console.log('blue')
}
function printC k } J ? 3 D 4 ^GreenBackground(){
console.log('green')
}
func* q d z G ltion printYellowBackground(){Z X
console.log('yellow [ C x bw')
}
switch(color) {
case 'black':
printBlad L a 8ckBackground();
break;
case 'red':
printRedBackground. F h 1 Z f m();
break;
case 'blue':
printBlueBackgrouJ # u ? F ( 8nd();
break;
case 'green':
priu / o Pn0 h D % P u etGreenBackground();
break;
default:
printYellowBackground();
}
待优化部分为switch
咱们用目标形式树立key-value映射联系
let colorMap = {
black: printBlack# 3 G S 0 m G *Background,
red: printRedBackground,
blue: printBlueBackground,
green: printGreenBackground,
yellow: printYellowBack: | ? eground
}
colorMap[color]? colorMap[color]() : printYel` + { ) 5 RlowBackground()
补白：此种办法借鉴于其他网友
默许值优化
优化前
function request(options){
let method = options.method?options.method:'GET'
let data = options.data?options.data:{}
//...
}
优化后
function request(options){
let method = optionsS ] n s 4 F.method || 'GET'
let data = od [ X k aptions.data || {}
//...
}
根据 ES6 优化后
functi m f * P U *on 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为真，V u P { h 1 H O /就会看到我')
}
let flag = true
if(flag){
log()
}
优化o n ? ~ { 7 N L B后
fk ) s g ? | :unction log(){
console.log('前面的flag为真，就会看到我')
}
let flag = true
flag && log()
示例2：
if(a && b){
c()
}
//=> 优化后 a && b &aO ] 7mp;& c()
//其他类推
此种写法项目中运用较多
单个 if else 带回来值 优化战略
优化前
fu( b Wnction demo(flag){
i] c } _ o jf(flag){
return "真"
}else{
return "假"
}
}4 = 1 r 3 H J S K
优化后
function demo(flag){
return flag? "真" : "假"
}
单个 if else 履行不同办法 优化战略
从一个例子说起： demo 办法传true履行 succv q j X r cess 办法，传 false履行 error办法
function success(E V $ 5 x ( ]){
console.log("success")
}
function fail(){
console.log("fail")
}
function demo(flag){
if(flag){
success()
}else{
fail()
}
}
看了以上多个例子后，你也许会这么优化：
function demo(flag){
flag?success():fail()
}
这个) _ ? _ x + N A应该是最常用的，
true就履行success，false就履行fail
弥补一个不常1 Q ? s S d Z见的
// 假如你不能确保 你所传的参数一定是布尔值的话 用这种
function demo(flag){
[false,truew M v u].includes(flag) && [fail,success][Number(flag)]()
}
// false 转成 0 ，对应履行success ，true 转成 1，对应履行 fail
// 假- f :如你能确保 你所传的参数一定是布尔值的话 用这种% 4 |
function demo(flag){
[f( z W ; D Hail,success][Number(flag)]()
}
此种优化战略，结合了 布尔值的false和true是能够转成 0 和1，因而能够拿来当索引运用
多个 else-if 带回来值 优化战略
封装一个获取方位的办法：getPosition
优化前
function getPosition(directv B S Y l J x [ioI b [n){E G I R ? 0 z W Z
if(directionf - & G R == "left"){
return "左"
}else if(direction == "ru T ^ z 0 H 0 } Eight"){
return "右"
}else if(di3 & ! Y | K t |rection ==W @ J | , M "top"){
return "上"
}elsI y T C R R L C se if(direction == "bottom"){
return "下"
}else{
return "不知道"
}
}
优化后
function getPosition(direcN / B G N I a 4tion){
return ({
left:"左",
right:"右",
top:"上",
bottom:"下"
})[direction] || "不知道"
}
多个 else-if 履行不同办法 优化战略
咱们做个权限按钮，不同人物登录一个系统，点击同个按钮履行不同的事务逻辑
优化前
let role = 'admin' //模仿登录接口回来的人物
document.querySelector('#bF [ Y 2tn').addEventListener( 'click' , function(){
if(role == 'admin'){
console.log('管理员点击此按W % / O 6钮履行的事务逻辑')
}else if(ro* r Z | zle == 'subAdmin'){
console.log('子管理员点击此按钮履行的事务逻辑')
}else if(role == 'mall'){
console.log('商场人物点o * 9 b t d g击此按钮履行的事务逻辑')
}else if(role == 'parkingLot'){
console.log('停车场人物点击此按钮履行的x Z g事务逻辑')
}
})
以上代码看上去没有什么问! d S 1题，从便于保护和管理r B W 3 ^ , { y角度考虑，是需求优化n e s B $的
优B # j P x v | m X化后
let role = 'admin' //模仿登录接口回来的人物
let btnPermissionsControl = {
admin:function(){
console.log('管理员点击此按钮履行的事务逻辑')
},
subAdmin:f4 K 0 s P , ;un, ! N *ction(){
console.log('子管理员点击此按钮履行的事务逻辑')
},
mall:function(){
console.log('商场人物点击此按钮履V A B | 行的事务逻辑')
},
parkingLot:function(){
console.log('停车场人物点击此按钮履行的事务逻辑')
}
}
documec K I {nt.querySelector('#btnp f J H x X m r').addEventListener( 'click' , btnPermissionsControl[role] )
优化后，F W H H . .你只需i 6 )求保护一个目标即可
多个 if 嵌套优化0 j J s L W b S战略
有些时分，后端回来的数据里动态存在n _ N 8某个值，也就意味着，有时分有这个数据，有时分没有，然后甩你一句话，“有就显现，没有就不显现”，作为前端的咱们天然很z z ] $ v严谨
场景：后端大哥说了，给你回来的数据里边的 假如有 userInfo字段，并且userInfo下面有hobby字段并且有值就显现 hobby里9 V Q p P u u边的内容，否则页面 hobby这一块不显现
模仿后端回来的数据
let result = {
status:200,
codeMsg:'success',
data:{
useS ~ $ ; . 3 Q IrInfo:{
age:18,
hobby:['敲代码','打篮球']
}
}
}
前端的严谨写法
if(result: o . Z u ` `.data){
if(resb t B ^ # fult.data.userInfo){
if(result.data.userInfo.hobbI ] F A 2 zy){
if(Array.isArray(rk | M +esult.datr h J ! B Z pa.userInfo.hobby)){
if(result.data.userInfo.hobby.length){
//遍历 result.data.userInfo.hobby 进行烘托显现
}
}
}
}
}
用 && 进行优化
第一种优化写法
//成功拿到数据了 result
if ( result.data && result.data.userInfo &&
result.data.useru p bInfo.hobbyL ; _ u h 8 i &&
Array.isArray(result.data.userInfo.hobby) &&
result.data.userInfo.hobby.length )
{
//遍历 result.data.userInfo.hobby 进行烘托显现
}
第二种优化写法
//J a b T成功拿到数据了 result
result.data &&
result.data.userInfo &&
result.data.userInfo.hobby &&
Ary x - M V z 1 Aray.isArray(resu) D S + ] }lt.datt T ia.un E @ ? 4serInfo.hobby) &&
result.data.userInfo.hobby.length) &&
(()=>{
//遍历 resuM M a i B } 8 N Jlt.data.userInfo.hobbyO & N L t - 进行烘托显现
})()
第三种优化写法x J 6 % @ Y 3 S
此种合适，严谨但又懒的前端
//成功拿到数据了| e & result
try {
if(result.data.userInfo.` ^ n /hobby.length){
//遍历 result.data.userInfo.hobby 进行_ 1 {烘托显现
}
} catch (error) {
}
此种选用x q Q p L % . w
try catch战略
其他
let flag = a==1? true:false //优化 => let flag = a==1
//假如 变量 flag 用的当地多的话能a 1 I够用这个 flag 变量保存，
//假如就一两个当地判断运用，主张直接 if (a==1){}
let FLAG = b==1? false:true //优化 => let FLAG = !(b==1)
//此种战略选用取反
//声明多个变量Z Q S时
var firt . ! mstName = '王'
var secondName = '儿'
var thirdName = '麻'
var lastName = '子'
// =>
// var firstName = '王',secondName = '儿',thirdName = '麻',lastName = '子'
//字符串拼接F P S 7 @ i 运用 + 号频繁时，用数组的join办法完结
//let result = firstNa5 - N N + pme+sencon[ r g ( K y C BdtName+threeName+lastName
// =&R | ( H 8 W } 2gt;
//join
lm W T L 9 S {et result = [firstNB j oame,secondName,thirdName,lastNb ] Bame].join('')
- 尽量运用箭头函数
- 尽量运用模板字符串
- 尽量运用解构赋值
- 尽量运用ES6语法，会发现代码会少许多
结语
假如你有更好的点子，欢迎留言
文中若有不精确或过错的当地，欢迎指出
往期文章 ：前端开发中实用的工具办法
