沐码小站

目前前后端数据交互通常会使用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的规则相反。