JS怎么封裝轉(zhuǎn)換前后端接口數(shù)據(jù)格式工具

本篇內(nèi)容介紹了“JS怎么封裝轉(zhuǎn)換前后端接口數(shù)據(jù)格式工具”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

思路

• 一般后端返回給前端的數(shù)據(jù)幾乎都是數(shù)組或者對(duì)象兩種格式，所以我們封裝的函數(shù)只需要考慮這兩種情況；

• 首先，我們這個(gè)函數(shù)需要滿足后端返回給前端的數(shù)據(jù)（下劃線轉(zhuǎn)駝峰），前端傳數(shù)據(jù)給后端（駝峰轉(zhuǎn)下劃線）兩種情況；

• 函數(shù)接收兩個(gè)值，第一個(gè)data（數(shù)組或?qū)ο髷?shù)據(jù)源），第二個(gè)type（判斷要哪種轉(zhuǎn)換模式：hump為下劃線轉(zhuǎn)駝峰，'line'為駝峰轉(zhuǎn)下劃線）；

• 首先，對(duì)傳入的data進(jìn)行判斷，如果是對(duì)象則轉(zhuǎn)換為數(shù)組，如果是數(shù)組則直接放行，然后深拷貝對(duì)象，防止意想不到的堆污染；

• 因?yàn)閿?shù)據(jù)的層數(shù)是不確定的，所以需要使用遞歸，對(duì)對(duì)象的value進(jìn)行判斷，如果是對(duì)象則遞歸；

• 遍歷data，對(duì)每個(gè)對(duì)象用forin進(jìn)行遍歷，然后根據(jù)type進(jìn)行相應(yīng)的處理，下劃線還要考慮到如果是最前面的下劃線，則直接刪除即可；

• 對(duì)象的改變是先保存原來(lái)的value，然后改變key后，將原來(lái)的key：value用delete刪除掉，然后再重新賦值（如果有更好的方法，可以和我說(shuō)，我個(gè)人也感覺(jué)這種方法不是很優(yōu)雅）；

• 最后，因?yàn)樯厦娌僮鳛榱朔奖悴僮?，?huì)將對(duì)象轉(zhuǎn)化為數(shù)組格式，操作完后，需要將原先是對(duì)象的重新轉(zhuǎn)化為對(duì)象，再返回回去，這樣不是更改原格式；

代碼

/** 返回?cái)?shù)據(jù)下劃線駝峰互轉(zhuǎn)函數(shù)封裝
 * @param {data} 'obj或ary'
 * @param {type} 'hump' 為下劃線轉(zhuǎn)駝峰，'line' 為駝峰轉(zhuǎn)下劃線
 * @return {Array||Object}
 */
export const formatHumpLineTransfer = (data, type = 'hump') => {
  // 判斷傳入的值是對(duì)象還是數(shù)組
  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) {
        // 如果值為對(duì)象
        if (Object.prototype.toString.call(item[key]) === '[object Object]') {
          toggleFn([item[key]])
        }
        // 如果值為數(shù)組
        else if (Object.prototype.toString.call(item[key]) === '[object Array]') {
          toggleFn(item[key])
        }
        // 下劃線 轉(zhuǎn) 駝峰
        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
          }
        }
        // 駝峰 轉(zhuǎn) 下劃線
        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)
  // 因?yàn)樯厦娌僮鳛榱朔奖悴僮?，?huì)將對(duì)象轉(zhuǎn)化為數(shù)組格式，操作完后，需要將原先是對(duì)象的重新轉(zhuǎn)化為對(duì)象
  if (Object.prototype.toString.call(data) === '[object Object]') {
    let obj = null
    newData.forEach((item) => (obj = item))
    return obj
  } else {
    return newData
  }
}

效果

轉(zhuǎn)換前：

轉(zhuǎn)換后：

“JS怎么封裝轉(zhuǎn)換前后端接口數(shù)據(jù)格式工具”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！