打一架藕畔，不行就再打一架-----來源：視覺中國(guó)
后臺(tái)接口返回一個(gè)數(shù)組，數(shù)組里面N多對(duì)象庄拇，每個(gè)對(duì)象里面幾十上百條數(shù)據(jù)注服，最好玩的是，我只需要每個(gè)對(duì)象里面的某兩個(gè)數(shù)據(jù)丛忆、祠汇、、熄诡、
類似這種：
datas:[
{
id:1000,
name: "帥哥"可很，
title: '...',
b: '...',
d: 0,
f:0,
....
},
{
id:1001,
name: "美女"，
title: '...',
b: '...',
d: 0,
f:0,
....
},
...
]
其實(shí)我只要id和name凰浮，找后臺(tái)解決我抠、、袜茧、算了吧菜拓，奈何天生就是個(gè)儒生知态，溫文爾雅洗贰，打架是打不贏的刻获，要是能打贏的就直接打吧衡楞，打完讓他們改驹沿！
數(shù)據(jù)量過多犀盟，對(duì)網(wǎng)絡(luò)請(qǐng)求影響大嗎翁都？說實(shí)話潮罪，不大姨谷，又不是幾兆的圖片逗宁，返回?cái)?shù)據(jù)的速度反正我感受不到延遲。
但是數(shù)據(jù)量過多對(duì)<u style="text-decoration: none; border-bottom: 1px dashed gray;">小程序</u>渲染界面有影響嗎梦湘？
答案是：有瞎颗！一般情況下我們是在wxml中循環(huán)data，然后取出item.id和item.name,其他數(shù)據(jù)看起來和我們無關(guān)捌议，但是查看官方文檔setData相關(guān)信息的時(shí)候有下面這一段話
setData 是小程序開發(fā)中使用最頻繁的接口哼拔，也是最容易引發(fā)性能問題的接口。在介紹常見的錯(cuò)誤用法前瓣颅，先簡(jiǎn)單介紹一下 setData 背后的工作原理管挟。
工作原理
小程序的視圖層目前使用 WebView 作為渲染載體，而邏輯層是由獨(dú)立的 JavascriptCore 作為運(yùn)行環(huán)境弄捕。在架構(gòu)上僻孝，WebView 和 JavascriptCore 都是獨(dú)立的模塊导帝，并不具備數(shù)據(jù)直接共享的通道。當(dāng)前穿铆，視圖層和邏輯層的數(shù)據(jù)傳輸您单，實(shí)際上通過兩邊提供的 evaluateJavascript 所實(shí)現(xiàn)。即用戶傳輸?shù)臄?shù)據(jù)荞雏，需要將其轉(zhuǎn)換為字符串形式傳遞虐秦，同時(shí)把轉(zhuǎn)換后的數(shù)據(jù)內(nèi)容拼接成一份 JS 腳本，再通過執(zhí)行 JS 腳本的形式傳遞到兩邊獨(dú)立環(huán)境凤优。
而 evaluateJavascript 的執(zhí)行會(huì)受很多方面的影響悦陋，數(shù)據(jù)到達(dá)視圖層并不是實(shí)時(shí)的。
其實(shí)就是我們setData里面的所有數(shù)據(jù)都被轉(zhuǎn)成了字符串筑辨，然后字符串郵費(fèi)轉(zhuǎn)換成JS腳本俺驶，然后頁(yè)面根據(jù)JS腳本去渲染頁(yè)面。那么我們能做的就是盡量少傳數(shù)據(jù)棍辕，而此時(shí)后臺(tái)返回這一大串?dāng)?shù)據(jù)就與此相悖了暮现，所以最好是新建一個(gè)tempData,將要的數(shù)據(jù)取出來之后再setDta這個(gè)tempData，以此來提高微信小程序的頁(yè)面渲染速度楚昭，提升微信小程序運(yùn)行效率栖袋，優(yōu)化微信小程序的用戶體驗(yàn)。
我們可以這樣寫：
[mw_shl_code=applescript,true] var tempData = []
for(var i = 0; i < datas.length; i++) {
var tempObj = {}
tempObj.id = datas[i].id
tempObj.name = datas[i].name
tempData.push(tempObj)
}
console.log(tempData)
[/mw_shl_code]
或者使用高階函數(shù)map()：
let tempDatas = datas.map(function(data){
return {
id: data.id,
name: data.name
}
})
console.log(tempDatas)
此時(shí)我們?cè)偈褂胹etData({})就能提高渲染效率了
同時(shí)再分享兩個(gè)setData技巧
1抚太、有一個(gè)Object如下
obj:{a:"a",b:"b",c:"c"},
此時(shí)已經(jīng)渲染到頁(yè)面了塘幅，然后我們修改了obj,此時(shí)可以選擇：
1）平時(shí)的做法
let obj = this.data.objobj.b = "我是后來修改的"this.setData({ obj: obj})
2）但是更優(yōu)化的做法是
this.setData({ 'obj.b': "我是后來修改的"})
不僅省了兩行代碼，同時(shí)還提高頁(yè)面渲染效率2尿贫、其實(shí)和1差不多电媳，就是Object變成數(shù)組Array當(dāng)我們要給數(shù)組的其中一個(gè)數(shù)據(jù)進(jìn)行修改時(shí)，我們可以參照上面的方法
this.setData({ 'array[1]': "我是后來修改的"})
當(dāng)我們要給數(shù)組的多個(gè)數(shù)據(jù)進(jìn)行修改時(shí)帅霜，我們會(huì)寫一個(gè)循環(huán)，然后修改array,此時(shí)是無法識(shí)別的,要寫成如下形式
for(var i = 0;i < 5;i++) {
this.setData({ [`array[${i}]`]:"我是后來修改的"
}) }
小伙伴們還有其他有關(guān)微信小程序setData的其他知識(shí)點(diǎn)呼伸，歡迎留言哦身冀，同時(shí)知道為上面那個(gè)為啥要加 []的，希望多多指教括享！
專欄作家
韋弦zhy 搂根。小程序社區(qū)博主。分享小程序開發(fā)實(shí)戰(zhàn)铃辖，堅(jiān)持原創(chuàng)剩愧。
本文原創(chuàng)發(fā)布于小程序社區(qū)。未經(jīng)許可娇斩，禁止轉(zhuǎn)載
原文地址：微信小程序后臺(tái)返回大量多余數(shù)據(jù)的處理-小程序社區(qū)/博主專區(qū)-微信小程序開發(fā)社區(qū)-微信小程序聯(lián)盟
相關(guān)文章
微信小程序 使用wxs計(jì)算獲取到的數(shù)據(jù)
微信小程序JSON數(shù)據(jù)的傳遞
小程序頁(yè)面效果之--滑動(dòng)屏幕加載數(shù)據(jù)
