js前端代码优化 - 01

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

在平时开发过程中，经常由于需求开发周期短，开发出一堆屎山代码，能跑能用，但是复用性低，代码不够简洁优化，可读性差，扩展性差，这样反而在后期需要修改需求时，会造成需要花费更多的时间去写一些重复代码，或者因为前期耦合性代码过高，造成不小心改动到原本业务逻辑的问题。因此，在开发过程中，注意一下代码规范，代码优化，对整个开发进度反而是更友好的。写好代码，提早下班！！！本专栏，会对代码优化做一些个人总结，能力不足，仅是自己记录学习。同时，本次专栏仅对于代码优化层面做一些小记录，性能方面暂不做研究。

今天开始，先对JavaScript代码优化进行记录。关于JavaScript代码开发中最常见的问题就是很少使用ES6方法导致代码冗余，不够清晰。如何更好的使用ES6语法对JavaScript代码进行优化呢？本文先来讲解if逻辑判断。

平时开发中，通常会使用if else或者switch case对一些逻辑进行判断。我们可以针对不同情况改用以下代码进行改写：

多重条件判断，可使用includes优化代码

优化前：

if(name==='coco' || name === 'vivi' || name === 'lala'){
  return true
}

优化后：

if(['coco','vivi','lala'].includes(name)){
 return true
}

不包含复杂逻辑的if else,可使用三元运算符优化

优化前：

if(name==='vivi'){
  return true
}else{
  return false
}

优化后：

name==='vivi'?true:false

多个简单逻辑判断

多个简单逻辑判断的if else或switch case，可使用map优化代码或对象/数组+索引优化代码或三元运算符优化代码

优化前：

switch (name) { 
  case 'vivi': 
    return '175cm'
    break 
  case 'coco': 
     return '165cm'
     break 
  default: 
    return '-'
 }

优化后：

1.map优化

    let nameMap = new Map([
        ['vivi', '175cm'],
        ['coco', '165cm']
    ]);
    return nameMap.get(name)?nameMap.get(name):'-'

2.对象/数组+索引代码优化

   let nameArray ={'vivi':'175cm','coco':'165cm'}
   return nameArray[name]:'-'

3.三元运算符

return name=='vivi'?'175cm': name=='coco'?'165cm': '-'