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

 更新时间:2023年03月31日 09:42:25   作者:我搁这敲代码呢  
这篇文章主要为大家介绍了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封装转换前后端接口数据格式的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript数据类型对函数式编程的影响示例解析

    JavaScript数据类型对函数式编程的影响示例解析

    这篇文章主要为大家介绍了JavaScript数据类型对函数式编程的影响示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • JS疑惑的数据类型及类型判断方法详解

    JS疑惑的数据类型及类型判断方法详解

    这篇文章主要为大家介绍了JS中疑惑的数据类型及类型判断方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 简单DEMO布局,逻辑,样式的练习

    微信小程序 简单DEMO布局,逻辑,样式的练习

    这篇文章主要介绍了微信小程序 简单DEMO布局,逻辑,样式的练习的相关资料,这里写一个简单实例练习小程序的布局,并附实例代码和实现效果图,需要的朋友可以参考下
    2016-11-11
  • 一文详解js基本类型与引用类型的区别

    一文详解js基本类型与引用类型的区别

    这篇文章主要为大家介绍了js基本类型与引用类型的区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • js中的函数嵌套和闭包详情

    js中的函数嵌套和闭包详情

    这篇文章主要介绍了js中的函数嵌套和闭包,在聊闭包这个问题之前,先了解一下变量的定义域,在js中,变量定义域有全局作用域和局部作用域之说,文章主要介绍函数的作用域,需要的朋友可以参考一下
    2021-11-11
  • JS实现密码箱小程序帮你记住各种密码

    JS实现密码箱小程序帮你记住各种密码

    这篇文章主要介绍了JS实现密码箱小程序再也不用记各种密码,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • ResizeObserver API使用示例详解

    ResizeObserver API使用示例详解

    这篇文章主要为大家介绍了ResizeObserver API使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • js封装一个websocket实现及使用详解

    js封装一个websocket实现及使用详解

    这篇文章主要为大家介绍了js封装一个websocket实现示例及使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 微信小程序 两种为对象属性赋值的方式详解

    微信小程序 两种为对象属性赋值的方式详解

    这篇文章主要介绍了微信小程序 两种为对象属性赋值的方式详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • tree shaking对打包体积优化及作用

    tree shaking对打包体积优化及作用

    这篇文章主要为大家介绍了tree shaking对打包体积优化及作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论