JavaScript條件嵌套代碼的可讀性優化

數據結構

功能是實現歷史記錄的數據添加，數據按年月日組織以下：

"timeData": {
  "2019": {  //年
    "11": {  //月
      "12": [   //日
        {
          "start": "21:14",
          "end": "21:25",
          "duration": "0:11"
        },
        {
          "start": "23:34",
          "end": "23:45",
          "duration": "0:11"
        }
      ],
      "13": [
        {
          "start": "23:34",
          "end": "23:45",
          "duration": "0:11"
        }
      ]
    }
  }
}
複製代碼

if else實現

添加時須要考慮沒有對應年月日的狀況，初次經過if else嵌套實現以下：

原理是依次嘗試按指定日、月、年去獲取數據，有數據則說明該日期以存在，該日沒有則查月，月沒有則查年，年沒有則添加該年月日，有年無月則添加該月日，有月無日則添加該日。

let dbData = getData(start.slice(0, 10)) //取指定年月日數據
  if (dbData) {
    dbData.push(data)
    save()
  } else {
    dbData = getData(start.slice(0, 7)) //取指定年月數據
    log('dbData', dbData)
    if (dbData) {
      dbData[sD] = [data]
      save()
    } else {
      dbData = getData(start.slice(0, 4)) //取指定年數據
      log('dbData', dbData)
      if (dbData) {
        dbData[sM] = { [sD]: [data] }
        save()
      } else {
        dbData = getData(start.slice(0, 0)) //取數據對象
        log('dbData', dbData)
        if (dbData) {
          dbData[sY] = { [sM]: { [sD]: [data] } }
          save()
        } else {
          log('Error: addTime startdata error')
        }
      }
    }
  }
複製代碼

能夠看到if else嵌套方式可讀性較差，各級類似很難一眼看懂邏輯。

switch實現

下面經過dbData的「或」賦值和gData函數，減小冗餘代碼並巧妙的定位數據狀況（location），並結合switch語句根據數據狀況進行處理：

let location: number = 0  
  let [ymd, ym, y] = [10, 7, 4] //ymd表明年月日的字符數,如: 2019-04-20 爲10
  let dbData = gData(ymd) || gData(ym) || gData(y) || gData(0) //依次按日,月,年查找數據, 有則賦值
  function gData(i: number) {
    location = i //用於定位數據提取的級別
    return getData(start.slice(0, i))
  }

  //根據數據的級別添加數據, 好比有年無月,則添加月日數據
  switch (location) {
    case ymd:
      dbData.push(data)
      save()
      break
    case ym:
      dbData[sD] = [data]
      save()
      break
    case y:
      dbData[sM] = { [sD]: [data] }
      save()
      break
    case 0:
      dbData[sY] = { [sM]: { [sD]: [data] } }
      save()
      break
    default:
      log('Error: addTime startdata error')
      break
  }
複製代碼

對象字面量實現

過了一天看到switch語句可用對象字面量替代，能大大下降圈複雜度，便將已上代碼簡化以下：

let location: number = 0
  let [ymd, ym, y] = [10, 7, 4] //ymd表明年月日的字符數,如: 2019-04-20 爲10
  let dbData = gData(ymd) || gData(ym) || gData(y) || gData(0) //依次按日,月,年查找數據, 有則賦值
  function gData(i: number) {
    location = i //用於定位數據提取的級別
    return getData(start.slice(0, i)) //經過日期查找對應的年月日數據
  }

  //根據已有的日期的狀況添加數據, 好比有年無月,則添加月日數據
  let situation = {
    [ymd]: () => dbData.push(data),
    [ym]: () => (dbData[sD] = [data]),
    [y]: () => (dbData[sM] = { [sD]: [data] }),
    0: () => (dbData[sY] = { [sM]: { [sD]: [data] } }),
  }
  situation[location]()
  save()
複製代碼

原文發佈自：有度博客