仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大

1.介绍

先看图

​ 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是

let arr = [
	{"colId":"SPECIAL_DESCRIBE","colName","SPECIAL_DESCRIBE名称"},
	{"colId":"CUS_NAME","colName","CUS_NAME名称"}
]

但是后端需要接收的数组是

let array = [
	{"id":"SPECIAL_DESCRIBE","label","SPECIAL_DESCRIBE名称"},
	{"id":"CUS_NAME","label","CUS_NAME名称"}
]

​ 因为这些数据是从后台查询出来的,所以我想通过在后端修改sql语句,用SQL的AS起别名,但是我去后端查看发现后端用的mybatis-plus的官方方法,直接查询的数据库全部,然后返回给了前端,所以思来想去跑去问了经理,他告诉我用replace,但是我没有用过,他说js都可以用,别说vue了,我就紧赶慢赶的去搜索,最后总结了一些,

2.解决方案

假如只是单独的解决上面的问题你可以直接这样做

//前端现在的数组
let arr = [
	{"colId":"SPECIAL_DESCRIBE","colName","SPECIAL_DESCRIBE名称"},
	{"colId":"CUS_NAME","colName","CUS_NAME名称"}
]
//假如后端需要的数组名字叫 array 直接定义
let array = JSON.parse(JSON.stringify(arr).replace(/colId/g,"id").replace(/colName/g,"label"))
console.log(array)
//现在你去打印就会看出来名字已经变了

3.其他例子

期间我发现了很多好玩的,你写完会发现 replace中的 / /g代表的什么,还有没有其他的符号,我就去做了攻略

3.1例子1: / /(作用截取)

//首先定义一个变量
let name = "仵航全世界最牛"
//之后我们进行截取
let newName = name.replace(/仵航/,"仵老大")
//这个时候我们进行打印
console.log(newName)
//输出的内容就是
仵老大全世界最牛

3.2例子2:/ /g(全局替换)

//这个也就是上面用到的全局替换
let wuhang = "今天仵航说,天气真的很好,"
wuhang = wuhang + "适合跟仵航一起去爬山,"
wuhang = wuhang + "也适合跟仵航一起去游泳"
//然后进行全局替换
let wulaoda = wuhang.replace(/仵航/g,"仵老大")
//进行打印
console.log(wulaoda)
//输出结果就是
今天仵老大说,天气真的很好,适合跟仵老大一起去爬山,也适合跟仵老大一起去游泳

3.3例子3://i(保证替换的大写不会发生改变)

//首先定义一个变量
let wuhang = "wuhang说,你真是个java开发工程师哎"
//然后进行替换,并保证你替换的字母大小写不发生改变
let wulaoda = wuhang.replace(/wuhang/i,"WuHang").replace(/java/i,"Java")
//进行打印
console.log(wulaoda)
//输出结果就是
WuHang说,你真是个Java开发工程师哎

当然还有另外几种,但是用的不多,基本上这几种就可以解决大部分问题,

4.应用场景

接下来截图我项目中用到的代码,对以后的自己说加油

//点击预览弹出弹框
    showTable(){


      console.log(sessionStorage)
      console.log("点击预览的时候",this.formatData.child1)
      // let sessionStorageID=sessionStorage.getItem("customQuery9fa91cea-a0b8-4cf7-ad3a-9bf679f07a0d")
      //把child1的数组遍历出来存到sessionStorage里


      let child1 = JSON.parse(JSON.stringify(this.formatData.child1).replace(/,"id"/g,"paramtID").replace(/colId/g,"id").replace(/colName/g,"label").replace(/colEnName/g,"fieldEnName").replace(/colChEnName/g,"fieleChEnName").replace(/conditionName/g,"condition"))
      console.log("child1",child1)
      let child2 = JSON.parse(JSON.stringify(this.formatData.child2).replace(/,"id"/g,"paramtID").replace(/colId/g,"id").replace(/colName/g,"label").replace(/colEnName/g,"fieldEnName").replace(/colChEnName/g,"fieleChEnName").replace(/conditionName/g,"condition"))
      console.log("child2",child2)
      let child3 = JSON.parse(JSON.stringify(this.formatData.child3).replace(/,"id"/g,"paramtID").replace(/colId/g,"id").replace(/colName/g,"label").replace(/colEnName/g,"fieldEnName").replace(/colChEnName/g,"fieleChEnName").replace(/conditionName/g,"condition"))
      console.log("child3",child3)
      let child4 = JSON.parse(JSON.stringify(this.formatData.child4).replace(/,"id"/g,"paramtID").replace(/colId/g,"id").replace(/colName/g,"label").replace(/colEnName/g,"fieldEnName").replace(/colChEnName/g,"fieleChEnName").replace(/conditionName/g,"condition"))
      console.log("child4",child4)

      for(let i=0;i<child1.length;i++){
        console.log("点击预览之后",child1[i])
        sessionStorage.setItem(child1[i].id+1,JSON.stringify(child1[i]))
      }
      for(let i=0;i<child2.length;i++){
        console.log("点击预览之后",child2[i])
        sessionStorage.setItem(child2[i].id+2,JSON.stringify(child2[i]))
      }
      for(let i=0;i<child3.length;i++){
        console.log("点击预览之后",child3[i])
        sessionStorage.setItem(child3[i].id+3,JSON.stringify(child3[i]))
      }
      for(let i=0;i<child4.length;i++){
        console.log("点击预览之后",child4[i])
        sessionStorage.setItem(child4[i].id+4,JSON.stringify(child4[i]))
      }

      this.$http.post('/reporttools/sys-dataset/queryTable',sessionStorage).then(resp =>{
        this.showTableData = resp.data
      })
      this.drawer = true;

    },

本期关于replace的分享就到这里,码字不易,希望您点个赞再走