仵航說 Vue用replace修改陣列中物件的鍵值或者欄位名 仵老大
阿新 • • 發佈：2020-12-19
# 仵航說 Vue用replace修改陣列中物件的鍵值或者欄位名 仵老大
## 1.介紹
先看圖
今天在專案中遇到了一個問題,例如我現在需要傳一些資料到後端,陣列例如是
```javascript
let arr = [
{"colId":"SPECIAL_DESCRIBE","colName","SPECIAL_DESCRIBE名稱"},
{"colId":"CUS_NAME","colName","CUS_NAME名稱"}
]
```
但是後端需要接收的陣列是
```javascript
let array = [
{"id":"SPECIAL_DESCRIBE","label","SPECIAL_DESCRIBE名稱"},
{"id":"CUS_NAME","label","CUS_NAME名稱"}
]
```
因為這些資料是從後臺查詢出來的,所以我想通過在後端修改sql語句,用SQL的AS起別名,但是我去後端檢視發現後端用的mybatis-plus的官方方法,直接查詢的資料庫全部,然後返回給了前端,所以思來想去跑去問了經理,他告訴我用replace,但是我沒有用過,他說js都可以用,別說vue了,我就緊趕慢趕的去搜索,最後總結了一些,
## 2.解決方案
假如只是單獨的解決上面的問題你可以直接這樣做
```javascript
//前端現在的陣列
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: / /(作用擷取)
```javascript
//首先定義一個變數
let name = "仵航全世界最牛"
//之後我們進行擷取
let newName = name.replace(/仵航/,"仵老大")
//這個時候我們進行列印
console.log(newName)
//輸出的內容就是
仵老大全世界最牛
```
### 3.2例子2:/ /g(全域性替換)
```javascript
//這個也就是上面用到的全域性替換
let wuhang = "今天仵航說,天氣真的很好,"
wuhang = wuhang + "適合跟仵航一起去爬山,"
wuhang = wuhang + "也適合跟仵航一起去游泳"
//然後進行全域性替換
let wulaoda = wuhang.replace(/仵航/g,"仵老大")
//進行列印
console.log(wulaoda)
//輸出結果就是
今天仵老大說,天氣真的很好,適合跟仵老大一起去爬山,也適合跟仵老大一起去游泳
```
### 3.3例子3://i(保證替換的大寫不會發生改變)
```javascript
//首先定義一個變數
let wuhang = "wuhang說,你真是個java開發工程師哎"
//然後進行替換,並保證你替換的字母大小寫不發生改變
let wulaoda = wuhang.replace(/wuhang/i,"WuHang").replace(/java/i,"Java")
//進行列印
console.log(wulaoda)
//輸出結果就是
WuHang說,你真是個Java開發工程師哎
```
當然還有另外幾種,但是用的不多,基本上這幾種就可以解決大部分問題,
## 4.應用場景
接下來截圖我專案中用到的程式碼,對以後的自己說加油
```javascript
//點選預覽彈出彈框
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