js转换对象key值的两种写法

有时候前端已经写好了页面，或者维护一些旧功能页，而新增的功能字段和旧的不一样，但功能基本一样，怎么办？
想要复用旧的页面功能，转换数据对象key值是个不错的方法。

方法一

采用 map 映射思维，key->value value->key

let data = {
     
  nianling: 18,
  mingzi: '李四',
  haizi: [
    {
     
      biaoji: 1,
      mingzi: '孩子1',
    },
    {
     
      biaoji: 2,
      mingzi: '孩子2',
    },
  ],
}

let keyMap = {
     
  age: 'nianling',
  name: 'mingzi',
  children: 'haizi',
  childId: 'biaoji',
}
// 方法一
function transformObjectKeys(obj, keyMap) {
     
  let result = {
     }
  // 为了不新增全局变量 result 把转换数据功能放到一个闭包里面
  function deepMap(obj, keyMap) {
     
    for (let key in obj) {
     
      if(toString.call(obj[key]) === '[object Object]') {
     
        deepMap(obj[key])
      } else if(toString.call(obj[key]) === '[object Array]') {
     
        obj[key].map((item, index) => {
     
          for(let newKey in keyMap) {
     
            if(item[keyMap[newKey]]) {
     
              item[newKey] = item[keyMap[newKey]]
              delete item[keyMap[newKey]]
            }
          }
        })
      } else {
     
        for(let newKey in keyMap) {
     
          if(obj[keyMap[newKey]]) {
     
            result[newKey] = obj[keyMap[newKey]]
          }
        }
      }
    }
    return result
  }
  return deepMap(obj, keyMap)
}

console.log("transformObjectKeys(data, keyMap)", transformObjectKeys(data, keyMap))
// transformObjectKeys(data, keyMap) { age: 18,  name: '李四',  children: [ { name: '孩子1', childId: 1 }, { name: '孩子2', childId: 2 } ] }

用一个map作为映射对象，把数据data中的key替换

方法二

采用的思路是一样的 map 映射，不过代码更简洁

let data = {
     
  nianling: 18,
  mingzi: '李四',
  haizi: [
    {
     
      biaoji: 1,
      mingzi: '孩子1',
    },
    {
     
      biaoji: 2,
      mingzi: '孩子2',
    },
  ],
}

let keyMap2 = {
     
  nianling: 'age',
  mingzi: 'name',
  haizi: 'children',
  biaoji: 'childId',
}

// 方法二
function transitionKey(list, map) {
     
  function toTransition(list) {
     
    var newObj = list.constructor === Array ? [] : {
     }

    for (let key in list) {
     
      var newKey = map[key] ? map[key] : key

      newObj[newKey] = typeof list[key] === 'object' ? toTransition(list[key], map) : list[key]
    }

    return newObj
  }

  return toTransition(list)
}
console.log("transitionKey(data, keyMap2)", transitionKey(data, keyMap2))
//transitionKey(data, keyMap2) { age: 18,name: '李四',  children: [ { childId: 1, name: '孩子1' }, { childId: 2, name: '孩子2' } ] 

鸣谢@a_boy 交流的简洁写法

细心的你有没有发现，这两个方法的差异？
其实主要差别在 keyMap 上，因为采取了不同的数据映射方法，导致写法的差别

• 方法一中，keyMap 对象的 key 是要转换的目标key value 是源数据 data 中对应的 key
  所以遍历的时候遍历了 keyMap 对象，增加了代码量
• 方法二中，keyMap2 对象的 key 是源数据data中对应的 key value 是要转换成目标的 key，递归遍历的时候就遍历 data 对象转换 key

写起来有点绕，看代码最容易看懂了，最好把demo跑一跑，更容易理解。