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

我怎么啥也不懂

于 2021-10-28 16:05:18 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue后台管理项目遇到的小问题文章标签：前端后端 javascript

本文链接：https://blog.csdn.net/m0_54991820/article/details/121016260

vue后台管理项目遇到的小问题专栏收录该内容

5 篇文章

订阅专栏

本文探讨了两种处理数据结构中字段名变更的方法：一是深拷贝并替换字段，二是数组映射新增字段。同时介绍了两种方法的优缺点，适用于前端和后端开发中的数据转换场景。

摘要生成于 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去掉