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封装转换前后端接口数据格式的资料请关注我们其它相关文章!
赞 (0)