es6解构赋值设置默认值优化多重判断问题

一般写法

我们读取api返回的数据是这样写的：

// 假设返回的数据结构
let result = {
      data:{
        bgInfo: {
          invoices: [],
          voucherInfoList: [
            {
              fileId: '1234567',
              fileName: 'temp',
              fileType: 'png',
            }
          ]
        }
      },
      head: {
        resMsg: '成功',
        resCode: '000000',
      }
    }
 // 获取api数据并做数据处理
 let res = result
    let myVoucherInfoList = []
    if(res.head && res.head.resCode === '000000') {
      console.log('code...')
      if(res.data && res.data.bgInfo) {
        if(res.data.bgInfo.voucherInfoList) {
          myVoucherInfoList = res.data.bgInfo.voucherInfoList || []
        }
      }
    }
    console.log(myVoucherInfoList)

上面的写法，层层判断后，才获取并设置一些值。而且存在极端的情况是，后端返回的数据中，data甚至可能不存在！那漏掉一些判断则会出问题，特别是生产环境下，这就需要引起我们的特别注意。

使用?.的写法：

let res = result
    let myVoucherInfoList = []
    if(res.head && res.head.resCode === '000000') {
      console.log('code...')
      myVoucherInfoList = res?.data?.bgInfo?.voucherInfoList || []
    }
    console.log(myVoucherInfoList)

看起来我们已经优化了一半了。那上面的res.head也可以使用同样的方式。可是写法就有点那啥，这样每次都需要这样写一遍。

更优的写法：

// 预定义好返回的数据大体结构
let resDefault = {
      data:{
        bgInfo: {
          invoices: [],
          voucherInfoList: []
        }
      },
      head: {
        resMsg: '',
        resCode: '',
      }
    }
    // 使用赋值解构设置默认值
    let {res = resDefault} = result
    let myVoucherInfoList = []
    if(res.head.resCode === '000000') {
        console.log('code...')
        myVoucherInfoList = res.data.bgInfo.voucherInfoList || []
    }
    console.log(myVoucherInfoList)

这种写法，则是需要对数据返回结构进行设置，其实和ts是一样的思想。优点是下面的逻辑和判断减少了，也不会有很多?。保证了后端返回数据结构缺少下不会出现生产问题，提高了容错率及代码健壮性。缺点是需要每个接口都需要进行结构预设，工作量增多了。

当然这里还可以对基本的结构进行预设，然后每个接口继承并扩展具体的业务数据结构。

let resBaseDefault = {
	data:{},
    head: {
      resMsg: '',
      resCode: '',
    }
}
let resDefault = _.merge(resBaseDefault, {
   data:{
     bgInfo: {
       invoices: [],
       voucherInfoList: []
     }
   }
 })

使用Lodash.js里面的get

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <script>
      const defaultData = {
          firstLevel:{
              secondLevel:[{
                  name: "",
                  price: ""
              }]
          }
      }
      let apiData = null
      // const { name, price} = apiData;
      // 报错
      /* 
        index.html:27 Uncaught TypeError: Cannot destructure property 'name' of 'apiData' as it is null.
      */
      const { name, price} = _.get(apiData,'firstLevel.secondLevel[0]', defaultData );
      console.log(!!name) // false
      console.log(!!price) // false
    </script>

完结