JS封装转换前后端接口数据格式工具函数下划线<=>大写 天天播报

(资料图)

目录

一、前言二、思路三、代码四、效果结语

一、前言

这段时间接近年底，公司的业务也不是很繁忙，有些闲暇的时间，就模仿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
  }
}

四、效果

转换前：

转换后：

结语

希望上面的能够帮助遇到相同问题的小伙伴们，更多关于JS封装转换前后端接口数据格式的资料请关注脚本之家其它相关文章！