Javascript对象命名风格转换——小驼峰命名和下划线命名相互转换

分手后的思念是犯贱 2022-12-22 08:41 585阅读 0赞

> 本文发布于我的个人网站：[https://wintc.top/article/22][https_wintc.top_article_22]，转载请注明。

目前前后端数据交互通常会使用json，如果前后端变量命名风格不一致，就会导致某一端要迁就另一端，这样在自己的代码中就会同时出现两种命名风格。为了避免这种尴尬，我们可以在接口获取数据和发送数据的地方做统一处理，将收到的数据统一转为前端的风格，而将发出的数据转为后端的风格。

这不，项目里后端用了下划线形式的命名风格，而前端用的是小驼峰格式，所以写了两个函数进行转换，主要用到了递归算法和字符串正则替换。

## 一、下划线格式转为小驼峰格式 ##

function camel (data) {
      if (typeof data != 'object' || !data) return data  
      if (Array.isArray(data)) {
        return data.map(item => camel(item))
      }
      
      const newData = {}
      for (let key in data) {
        let newKey = key.replace(/_([a-z])/g, (p, m) => m.toUpperCase())
        newData[newKey] = camel(data[key])
      }
      return newData
    }

## 二、小驼峰格式转为下划线格式 ##

function underline (data) {
      if (typeof data != 'object' || !data) return data
      if (Array.isArray(data)) {
        return data.map(item => underline(item))
      }
      
      const newData = {}
      for (let key in data) {
        let newKey = key.replace(/([A-Z])/g, (p, m) => `_${m.toLowerCase()}`)
        newData[newKey] = underline(data[key])
      }
      return newData
    }

两个函数非常相似，不同之处仅在于替换key的规则相反。

[https_wintc.top_article_22]: https://wintc.top/article/22