仵航說 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的分享就到這里,碼字不易,希望您點個贊再走