小程序批量修改对象的属性名

在数据渲染中, 前端的属性名和后端返回的数据的属性名不一致,这时就涉及属性重命名

基本的修改对象属性名

将属性名id修改为value, name修改label

const data = {
    id: 1,
    name: 'aime'
}

// id => value, name => label
data.value = data.id
data.label = data.name

如果重命名后,不需要保留原来的属性,可以使用 操作符delete 进行删除

...
data.value = data.id
data.label = data.name

// 删除原来的属性
delete data.id
delete data.name

封装-对象属性名

如果多处都需要修改属性名,这时考虑将其封装为一个方法中,方便使用

/**
 * 重命名对象的属性名
 * obj 对象
 * map 旧属性:新属性 的映射关系
 * keepOldProp 是否保留旧属性, 默认会删除原来的属性,如果需要保留原属性,请传递true
 */
const renameObjProp = (obj, map = {}, keepOldProp) => {

  if (!isEmpty(map)) {
    for (let prop in map) {
      const oldProp = prop
      const newProp = map[prop]

      replace(obj, oldProp, newProp, keepOldProp)
    }
  }

  function replace(o, oldProp, newProp, keepOldProp) {
    if (o.hasOwnProperty(oldProp)) {
      o[newProp] = o[oldProp]

      if (!keepOldProp) {
        delete o[oldProp]
      }
    }
  }
}

// 判断是否为空
const isEmpty = value => {
  if (value === null || value === '' || value === undefined) {
    return true
  }
  if (Array.isArray(value)) {
    return value.length === 0
  }
  if (typeof value === 'object') {
    return Object.keys(value).length === 0
  }
  return false
}

module.exports = {
    renameObjProp
}

使用

// 导入,根据你的实际路径填写
import { renameObjProp } from '../../utils/util.js'


clickRename () {
    const data = {
      id: 1,
      name: 'aime',
      age: 20
    }

    renameObjProp(data, {
      name: "label",
      id: "value"
    })

    // 处理后 {age: 20, label: "aime", value: 1}
    console.log(data) 
}

保留原有属性keepOldProp = true

renameObjProp(data, {
  name: "label",
  id: "value"
}, true)

// {id: 1, name: "aime", age: 20, label: "aime", value: 1}
console.log(data) 

修改数组中对象的属性名

当然有时候数据是一个数组对象,一个个修改太麻烦,使用循环即可解决,大体如下

/**
 * 批量重命名数组中对象的属性名
 * arr 数组
 * map 旧属性:新属性 的映射关系
 * keepOldProp 是否保留旧属性
 */
const renameProp = (arr, map, keepOldProp) => {

  if (!isEmpty(arr)) {
    arr.forEach(o => {
      renameObjProp(o, map, keepOldProp)
    })
  }
}

使用和上面类似,导入renameProp即可直接使用

完整的

/**
 * 批量重命名数组中对象的属性名
 * arr 数组
 * map 旧属性:新属性 的映射关系
 * keepOldProp 是否保留旧属性
 */
const renameProp = (arr, map, keepOldProp) => {

  if (!isEmpty(arr)) {
    arr.forEach(o => {
      renameObjProp(o, map, keepOldProp)
    })
  }
}
 
const renameObjProp = (obj, map = {}, keepOldProp) => {

  if (!isEmpty(map)) {
    for (let prop in map) {
      const oldProp = prop
      const newProp = map[prop]

      replace(obj, oldProp, newProp, keepOldProp)
    }
  }

  function replace(o, oldProp, newProp, keepOldProp) {
    if (o.hasOwnProperty(oldProp)) {
      o[newProp] = o[oldProp]

      if (!keepOldProp) {
        delete o[oldProp]
      }
    }
  }
}


module.exports = {
  renameProp,
  renameObjProp
}