代码优化策略【持续更新】

1.获取对象属性严谨写法

（严谨写法就是要先判断该对象是否存在！）
  const name = obj && obj.name;

2.使用ES6剩余参数...取你所想取的数据

  包含后端不需要字段的采纳数对象b和d
  const params={
    a:1,
    b:2,
    c:3,
    d:4
  }

  //后端同事说：我只要a字段和c字段，其他多余字段给我会报错，于是需要重新组装
  //没有级别的组装
  delete params.b
  delete params.d

  //青铜级别的组装
  const param={
    a:params.a,
    c:params.c
  }

  //砖石级别组装
  const {a,c}=params
  const param1={a,c}

3.巧用Array.prototype.includes和String.prototype.includes和includes+三元判断
 

    //使用前
    function verifyIdentity(identityId){
      if(identityId==1 || identityId==2 || identityId==3 || identityId==4){
        return '你的身份合法，请通行！'
      }else{
        return '你的身份未知，警告！'
      }
    }


    //使用后
   function verifyIdentity1(identityId){
     if([1,2,3,4].includes(identityId)){
        return '你的身份合法，请通行！'
     }else{
        return '你的身份未知，警告！'
      }
   }

   function verifyIdentity2(identityId){
    return [1,2,3,4].includes(identityId)?'你的身份合法，请通行！':'你的身份未知，警告！'
   }

 4.优化默认值

  //优化前
  function request1(options){
    let method=options.method?options.method:'GET'
    let data=options.data?options.data:{}
  }

  //优化后
  function request2(){
    let method=options.method||'GET'
    let data=options.data||{}
  }
  //基于ES6的优化
  function request3(method='GET',data={}){}

  //举例：
  //有时候我们封装请求，需要准备自己的默认参数，然后与传入的参数进行合并得到最终的参数
  function AddRequest(options){
    let opt=Object.assign({
      method:'POST',
      data:{}
    },options)
    return opt
  }
console.log(AddRequest({name:'hzz'}))//{method: 'POST', data: {…}, name: 'hzz'}

5.单个if语句的优化策略

  //优化前  示例1
  function log(){
    console.log('当flag为true的时候，你就会看到我')
  }
  let flag=true
  if(flag){
    log()
  }

  //优化后
  flag&&log()

  //示例2
  let a=true
  let b=true
  function c(){
    console.log('当a与b为true的时候，你会看到我')
  }
  if(a&&b){
    c()
  }
  //优化后
  a && b && c()

6.多个if条件 执行相同逻辑，优化策略（归并达到相同结果的 不同条件）

  //优化前
  function test(){
    if(a===1){
      return '结果'
    }
    if(b===2){
      return '结果'
    }
    if(c===3){
      return '结果'
    }
  }


//优化后
  function test(){
    if(a===1||b===2||c===3){
      return '结果'
    }
  }

7.单个if esle优化策略（思路是：先直接判断可能出错的部分，再执行业务逻辑）

 //优化前
 let flag1=true
  function test(){
    if(flag1){
      //执行业务逻辑
      //执行业务逻辑
    }else{
      return
    }
  }
  //优化后
  function test(){
    if(!flag) return
    //接下来再执行业务逻辑
  }

8.单个if else带返回值 优化策略

  //优化前
  function demo(flag){
    if(flag){
      return '真'
    }else{
      return '假'
    }
  }
  //优化后
  function demo(flag){
    return flag?'真':'假'
  }

9.单个if else执行不同方法(这是比较常见的，true就执行success，繁殖执行fail)

  function success(){
    console.log(success)
  }

  function fail(){
    console.log('fail')
  }

  function demo(flag){
    if(flag){
      success()
    }else{
      fail()
    }
  }

  //也许可以这样优化
  function demo(){
    flag?success():fail()
  }

10.多个else-if带返回值 优化策略

//举例：封装一个获取位置的方法：getPosition
  function getPosition(direction){
    if(direction=='left'){
      return '左'
    }else if(direction=='right'){
      return '右'
    }else if(direction=='top'){
      return '上'
    }else{
      return '未知'
    }
  }

11.多个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 btnPermissionControl={
    admin:function(){
      console.log('管理员点击此按钮执行的业务逻辑')
    },
    subAdmin:function(){
      console.log('子管理员点击此按钮执行的业务逻辑')
    },
    mall:function(){
      console.log('商场角色点击此按钮执行的业务逻辑')
    },
    parkingLot:function(){
        console.log('停车场角色点击此按钮执行的业务逻辑')
    }
}
document.querySelector('#btn').addEventListener('click',btnPermissionControl[role])

12. 多个if嵌套优化侧策略

  //举例：有些时候，后端返回的数据动态存在某个值，也就意味着，有时有这个数据，有时没有：接收到数据后，
  //前端有数据就显示，没有数据就不显示
  //场景：返回的数据：如果有userInfo字符，并且userInfo字段下面有hobby属性，则显示hobby里面的内容，否则页面hobby这一块不显示
  
//模拟厚点返回的数据
  let result={
    status:200,
    codeMsg:'success',
    data:{
      userInfo:{
        age:18,
        hobby:['敲代码','羽毛球']
      }
    }
 }

//前端严谨的写法
//没有优化前
  if(result.data){
    if(result.data.userInfo){
      if(result.data.userInfo.hobby){
       if(Array.isArray(result.data.userInfo.hobby)){
         if(result.data.userInfo.hobby.length
           //遍历result.data.userInfo.hobby进行渲染显示
         }
       }
      }
    }
  }


  //优化方案1：使用&&进行优化
  if(result.data&&result.data.userInfo&&result.data.userInfo.hobby
  &&Array.isArray(result.data.userInfo.hobby)&&result.data.userInfo.hobby.length){
     //遍历result.data.userInfo.hobby进行渲染显示
  }

  //第三种优化写法：使用try catch策略（严谨但又懒的前端）
  //成功拿到了result数据
  try{
    //这里只要发生错误时候，会捕捉到错误
    if(result.data.userInfo.hobby.length){
      //遍历result.data.userInfo.hobby进行渲染显示
    }
  }catch(error){

  }

  //第四种优化方式（使用最新语法）
  if(result?.data?.userInfo?.hobby?.length){
    //遍历result.data.userInfo.hobby进行渲染显示
  }

 13.巧用局部变量

<template>
  <div>
    {
   
   { result }}
</div>
</template>

<script>
export default {
  props: ['start'],
  computed: {
    num () { return 42 },
    result () {
      const num = this.num
      let result = this.start
      for (let i = 0; i < 1000; i++) {
        result += heavy(num)
      }
      return result
    }
  }
}
</script>

这里的优化主要是针对data数据的访问，比如你在某个逻辑中会多次用到data中的属性，那么你优先做法是先把这个你需要频繁访问到的数据使用一个局部变量存储起来，然后直接访问这个局部变量即可。原因：data中的数据时响应式的，那么你每次访问的时候必然会触发它的getter，进而会执行依赖收集相关的逻辑，当你有几百次循环跟新组件时候，每个组件computed重新计算，然后多次执行，想必然性能肯定是会下降的。解决：this.num执行一次依赖收集就够了，把它的getter求值的结果赋值给局部变量，每次访问num的时候不会触发getter。

14.项目首屏事件

        有时候第一次加载项目的时候，会显示白屏，这对用户来说是非常不友好的，个人用过的觉得不错的方式就是在index.html中加一个loading的动画，提高用户的使用体验

15. 可选链

        可选的链接?.如果值在?之前，则停止评估，返回undefined或null，解决了如果你取了没有定义的数据的时候报错的问题（曾经就遇到这个坑！实在是太不严谨了啊！）

undefined。
const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// 输出: "Kapil"
user.employ?.name;
// 输出: undefined
user.employ.name
// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

16.将Object大属性转成属性数组

        使用Object.entries()，Object.keys()，Object.values()

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// 输出
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]