1. 數(shù)據(jù)處理： 直接從后臺(tái)返回?cái)?shù)據(jù)取出自己想要的屬性，并將其修改成自己想要的屬性名：

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

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

2.數(shù)據(jù)已經(jīng)修改了但是視圖沒(méi)有更新：

本次我遇到的是 修改數(shù)組中某個(gè)對(duì)象中的某一個(gè)屬性，數(shù)據(jù)已經(jīng)修改成功了，但是視圖卻沒(méi)有修改成功。
解決辦法使用this.$set，來(lái)修改數(shù)據(jù)，這樣才會(huì)觸發(fā)視圖更新。
比如要修改：allCard數(shù)組中，某項(xiàng)（對(duì)象）中的某個(gè)屬性值：

allCard: [{iconUrl: '', title: '請(qǐng)?zhí)砑用Q(chēng)', desc: '請(qǐng)用一句話描述',thumburl:'xxxx', pagepath: '', remark: 'xxx', // 備注isSelectAppletCard:false},{iconUrl: 'xxxx', title: '請(qǐng)?zhí)砑用Q(chēng)', desc: '請(qǐng)用一句話描述', thumburl: '', pagepath: '', isSelectAppletCard:false}] // this.allCard --為要修改的對(duì)象 val為修改數(shù)組中對(duì)象的索引值 { ...this.allCard[val] } 是要修改對(duì)象所有數(shù)據(jù)的數(shù)據(jù)this.allCard[val].isSelectAppletCard = true; // 這里是對(duì)要修改數(shù)組中對(duì)象的某個(gè)屬性，進(jìn)行修改this.$set(this.allCard, val, { ...this.allCard[val] }); // 把修改后的該對(duì)象，重新用this.$set修改下，這樣就會(huì)觸發(fā)視圖更新。

3.給數(shù)組中每一個(gè)對(duì)象添加一個(gè)屬性：

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

4.凍結(jié)對(duì)象，使該對(duì)象中的屬性無(wú)法被修改，賦值。

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. 判斷對(duì)象屬性中的值是否包含指定的值：

// 接口a獲取的數(shù)據(jù)： let array = [{value: 15, // value 注意：均是字符串類(lèi)型，因?yàn)橐话銖慕涌讷@取的字符串類(lèi)型的-我們公司label: '張三',},{value: 12,label: '李四',},{value: 14,label: '王五',},{value: 10,label: '王二麻子',}, ]// 接口b 獲取的數(shù)據(jù)：let array02 = [{age: 18,values: '可樂(lè)',traggerValue: '15',},{age: 19,values: '可樂(lè)',traggerValue: '14,13,10', // 注意：也是字符串類(lèi)型}, ] 需求： array02 是要渲染到頁(yè)面的數(shù)據(jù)，要將 array02 中的 traggerValue 屬性，在 array 中的數(shù)據(jù)找到 相同 value 對(duì)應(yīng)的 label, 并用逗號(hào)將對(duì)應(yīng)的 label 數(shù)據(jù) 拼接好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}) }) // 注意這里使用 計(jì)算屬性比較好

6. 工作中常用的深拷貝（簡(jiǎn)單，快速）:

背景：工作中對(duì)于一些數(shù)據(jù)不是很復(fù)雜的，但又確實(shí)需要拷貝一份出來(lái)，不受其他數(shù)據(jù)影響，就可以用這個(gè)方法。

注意：使用拓展運(yùn)算符來(lái)進(jìn)行深拷貝，只能拷貝一層數(shù)據(jù)，既在對(duì)象中的對(duì)象，里面的對(duì)象拷貝的還是內(nèi)存地址。 ```javascript let object02 = {name:'張三',age:18,deep:{name:'張三的小弟',age:177777},array:[1,2,3]} // 假如這是從后臺(tái)接口獲取的數(shù)據(jù) // 現(xiàn)在要克隆一份出來(lái) let deepCopy= {...object02,deep:{...object02.deep}}; // {name:'張三',age:18,deep:{name:'張三的小弟',age:177777},array:[1,2,3]} --已經(jīng)拷貝成功// 此時(shí)進(jìn)行此時(shí) object02.age=88; console.log(object02 ) // {name: "張三", age: 88, deep: {…}, array: Array(3)} console.log(deepCopy) // {name: "張三", age: 18, deep: {…}, array: Array(3)}// 修改對(duì)象中的對(duì)象中的屬性值： 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: "張三"// 都是沒(méi)有問(wèn)題的，都是拷貝的是值，不是內(nèi)存地址。但是注意：使用拓展運(yùn)算符只能深拷貝一層數(shù)據(jù)結(jié)構(gòu)， 多層次的（對(duì)象里面套對(duì)象），中這種拷貝的是內(nèi)存地址，還是屬于淺拷貝。 這里我是直接在控制臺(tái)寫(xiě)的，可能不是很規(guī)范。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。