1. 數據處理： 直接從后臺返回數據取出自己想要的屬性，并將其修改成自己想要的屬性名：

list - 為需要處理的數組
value label: 是想要需要的屬性名
item.nichname item.nickname,是上面需要被修改屬性名
背景：就是修改請求回來的數據中某些數據的字段名，修改成自己想要的字段名

const list007 = list.map((item) => {return {value: item.platformUid,label: item.nickname,};});// 這樣就會把后臺返回的數據中我們不需要的屬性剔除了，取出我們想要的屬性 platformUid nickname ,然后我們只是要這兩個字段對應的數據，不想要兩個字段名，所以需要修改字段名修改為 value label， 最后就會返回一個數組如：[{value:'zs', // zs 是 platformUid 字段對應的數據label:'張三' // 張三 是 nickname 字段對應的數據}]

2.數據已經修改了但是視圖沒有更新：

本次我遇到的是 修改數組中某個對象中的某一個屬性，數據已經修改成功了，但是視圖卻沒有修改成功。
解決辦法使用this.$set，來修改數據，這樣才會觸發視圖更新。
比如要修改：allCard數組中，某項（對象）中的某個屬性值：

allCard: [{iconUrl: '', title: '請添加名稱', desc: '請用一句話描述',thumburl:'xxxx', pagepath: '', remark: 'xxx', // 備注isSelectAppletCard:false},{iconUrl: 'xxxx', title: '請添加名稱', desc: '請用一句話描述', thumburl: '', pagepath: '', isSelectAppletCard:false}] // this.allCard --為要修改的對象 val為修改數組中對象的索引值 { ...this.allCard[val] } 是要修改對象所有數據的數據this.allCard[val].isSelectAppletCard = true; // 這里是對要修改數組中對象的某個屬性，進行修改this.$set(this.allCard, val, { ...this.allCard[val] }); // 把修改后的該對象，重新用this.$set修改下，這樣就會觸發視圖更新。

3.給數組中每一個對象添加一個屬性：

// allCard 是一個數組 我們要給這個數組中的每一個對象添加一個屬性，并賦予一個初始值。 this.allCard.filter((item) => (item.isSelectAppletCard = false)); // 選中

4.凍結對象，使該對象中的屬性無法被修改，賦值。

function freezeObj(obj) {Object.freeze(obj)Object.keys(obj).forEach((key, i) => {if (typeof obj[key] === 'object' &&Object.prototype.toString.call(obj[key]) !== '[object Null]') {freezeObj(obj[key])}}) }

5. 判斷對象屬性中的值是否包含指定的值：

// 接口a獲取的數據： let array = [{value: 15, // value 注意：均是字符串類型，因為一般從接口獲取的字符串類型的-我們公司label: '張三',},{value: 12,label: '李四',},{value: 14,label: '王五',},{value: 10,label: '王二麻子',}, ]// 接口b 獲取的數據：let array02 = [{age: 18,values: '可樂',traggerValue: '15',},{age: 19,values: '可樂',traggerValue: '14,13,10', // 注意：也是字符串類型}, ] 需求： array02 是要渲染到頁面的數據，要將 array02 中的 traggerValue 屬性，在 array 中的數據找到 相同 value 對應的 label, 并用逗號將對應的 label 數據 拼接好array.forEach((val, index) => {array02.forEach((item) => {item.selectWeChatIndex = item.weChatRobotIds.indexOf(val.value)if (item.selectWeChatIndex !== -1) {if (item.slectWeChatName === undefined) item.slectWeChatName = ''// item.slectWeChatName += val.label + ',';const values = index ? ',' + val.label : val.labelitem.slectWeChatName += values}return item}) }) // 注意這里使用 計算屬性比較好

6. 工作中常用的深拷貝（簡單，快速）:

背景：工作中對于一些數據不是很復雜的，但又確實需要拷貝一份出來，不受其他數據影響，就可以用這個方法。

注意：使用拓展運算符來進行深拷貝，只能拷貝一層數據，既在對象中的對象，里面的對象拷貝的還是內存地址。 ```javascript let object02 = {name:'張三',age:18,deep:{name:'張三的小弟',age:177777},array:[1,2,3]} // 假如這是從后臺接口獲取的數據 // 現在要克隆一份出來 let deepCopy= {...object02,deep:{...object02.deep}}; // {name:'張三',age:18,deep:{name:'張三的小弟',age:177777},array:[1,2,3]} --已經拷貝成功// 此時進行此時 object02.age=88; console.log(object02 ) // {name: "張三", age: 88, deep: {…}, array: Array(3)} console.log(deepCopy) // {name: "張三", age: 18, deep: {…}, array: Array(3)}// 修改對象中的對象中的屬性值： object02.deep.age=99； console.log(object02); // age: 18 // array: (3) [1, 2, 3] // deep: {name: "張三的小弟", age: 99} // name: "張三"console.log(deepCopy) // age: 18 // array: (3) [1, 2, 3] // deep:{age: 177777 // name: "張三的小弟"} //name: "張三"// 都是沒有問題的，都是拷貝的是值，不是內存地址。但是注意：使用拓展運算符只能深拷貝一層數據結構， 多層次的（對象里面套對象），中這種拷貝的是內存地址，還是屬于淺拷貝。 這里我是直接在控制臺寫的，可能不是很規范。

總結

以上是生活随笔為你收集整理的前端js vue遇到的一些简单的数据处理-持续更新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。