前端想要把后端接口的字段名改成自己想要的，有以下两种方法

小白求知之路

于 2023-03-06 11:11:12 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/yanwu666/article/details/129357687

文章介绍了前端如何将从后端接口获取的字段名进行转换。第一种方法是通过深拷贝数据然后使用`replace`全局替换字段名，但需注意可能对其他引用该字段的地方产生影响。为避免影响，可以将替换后的数据存入新的变量。第二种方法是使用`map`遍历数组，为每个对象添加新字段并保留原字段，但未删除原字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端想要把后端接口的字段名改成自己想要的，有以下两种方法

this.roleDatas = JSON.parse(JSON.stringify(this.roleDatas).replace(/appName/g,'roleName'))

this.roleDatas 是接口拿到的数据,数据结构为数组对象，先深拷贝，再用replace属性全局替换，
把this.roleDatas里的appName字段名换成roleName。
如果页面有两处地方用到appName，字段名改变会造成影响，
解决办法就是替换以后把整个数组给到别的数据中而不是自己本身，在data中重新定义一个空数组 systemDatas,
把等号前面的this.roleDatas改成this.systemDatas。

第二种方法：遍历
 this.roleDatas = this.roleDatas.map(el=>{
            return {
                roleName: el.appName,
                ...el
            }
        })
 这是 this.roleDatas数组中每个对象都会新增一个字段 roleName,值就为appName的值，
这里有个问题是没把原数据中的appName去掉

参考链接link