仵航說 Vue用replace修改陣列中物件的鍵值或者欄位名 仵老大

仵航發表於2020-12-19
Vue陣列物件

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

相關文章