JS封裝轉換前後端介面資料格式工具函數下劃線<=>大寫

2023-04-02 06:02:04

一、前言

這段時間接近年底，公司的業務也不是很繁忙，有些閒暇的時間，就模仿ruoyi寫一個後臺系統，技術棧前端是react18，後端為koa2；

在一個介面返回資料的過程中，遇到一個問題，就是後端資料儲存到資料庫中的命名標準是下劃線，而前端的這邊的命名標準是駝峰命名，所以如果直接將從資料庫的資料返回給前端，便非常不優雅，網上想直接找工具包，也沒找到合適的，故而自己手寫了一個，如果有同樣需求的小夥伴們，可以直接拿去用。

二、思路

一般後端返回給前端的資料幾乎都是陣列或者物件兩種格式，所以我們封裝的函數只需要考慮這兩種情況；
首先，我們這個函數需要滿足後端返回給前端的資料（下劃線轉駝峰），前端傳資料給後端（駝峰轉下劃線）兩種情況；
函數接收兩個值，第一個data（陣列或物件資料來源），第二個type（判斷要哪種轉換模式：hump為下劃線轉駝峰，'line'為駝峰轉下劃線）；
首先，對傳入的data進行判斷，如果是物件則轉換為陣列，如果是陣列則直接放行，然後深拷貝物件，防止意想不到的堆汙染；
因為資料的層數是不確定的，所以需要使用遞迴，對物件的value進行判斷，如果是物件則遞迴；
遍歷data，對每個物件用forin進行遍歷，然後根據type進行相應的處理，下劃線還要考慮到如果是最前面的下劃線，則直接刪除即可；
物件的改變是先儲存原來的value，然後改變key後，將原來的key：value用delete刪除掉，然後再重新賦值（如果有更好的方法，可以和我說，我個人也感覺這種方法不是很優雅）；
最後，因為上面操作為了方便操作，會將物件轉化為陣列格式，操作完後，需要將原先是物件的重新轉化為物件，再返回回去，這樣不是更改原格式；

三、程式碼

/** 返回資料下劃線駝峰互轉函數封裝
 * @param {data} 'obj或ary'
 * @param {type} 'hump' 為下劃線轉駝峰，'line' 為駝峰轉下劃線
 * @return {Array||Object}
 */
export const formatHumpLineTransfer = (data, type = 'hump') => {
  // 判斷傳入的值是物件還是陣列
  const newData =
    Object.prototype.toString.call(data) === '[object Object]'
      ? [JSON.parse(JSON.stringify(data))]
      : JSON.parse(JSON.stringify(data))

  function toggleFn(list) {
    list.forEach((item) => {
      for (const key in item) {
        // 如果值為物件
        if (Object.prototype.toString.call(item[key]) === '[object Object]') {
          toggleFn([item[key]])
        }
        // 如果值為陣列
        else if (Object.prototype.toString.call(item[key]) === '[object Array]') {
          toggleFn(item[key])
        }
        // 下劃線 轉 駝峰
        else if (type === 'hump') {
          const keyArr = key.split('_')
          let str = ''
          if (keyArr.length > 1) {
            keyArr.forEach((item, index) => {
              if (item) {
                if (index) {
                  const arr = item.split('')
                  arr[0] = arr[0].toUpperCase()
                  str += arr.join('')
                } else {
                  str += item
                }
              }
              if (!item) {
                keyArr.splice(0, 1)
              }
            })
            const newValue = item[key]
            delete item[key]
            item[str] = newValue
          }
        }
        // 駝峰 轉 下劃線
        else if (type === 'line') {
          const regexp = /^[A-Z]+$/
          const newKey = key.split('')
          const newValue = item[key]
          newKey.forEach((item2, index2) => {
            if (regexp.test(item2)) {
              newKey[index2] = '_' + item2.toLowerCase()
            }
          })
          delete item[key]
          item[newKey.join('')] = newValue
        }
      }
    })
  }
  toggleFn(newData)
  // 因為上面操作為了方便操作，會將物件轉化為陣列格式，操作完後，需要將原先是物件的重新轉化為物件
  if (Object.prototype.toString.call(data) === '[object Object]') {
    let obj = null
    newData.forEach((item) => (obj = item))
    return obj
  } else {
    return newData
  }
}