臺接口返回一個數組，數組裏面N多對象，每個對象裏面幾十上百條數據，最好玩的是，我只需要每個對象裏面的某兩個數據、、、、

類似這種：

1. datas:[
2. {
3. id:1000,
4. name: "帥哥"，
5. title: ‘...‘,
6. b: ‘...‘,
7. d: 0,
8. f:0,
9. ....
10. },
11. {
12. id:1001,
13. name: "美女"，
14. title: ‘...‘,
15. b: ‘...‘,
16. d: 0,
17. f:0,
18. ....
19. },
20. ...
21. ]

其實我只要id和name，找後臺解決、、、算了吧，奈何天生就是個儒生，溫文爾雅，打架是打不贏的，要是能打贏的就直接打吧，打完讓他們改！

數據量過多，對網絡請求影響大嗎？說實話，不大，又不是幾兆的圖片，返回數據的速度反正我感受不到延遲。

但是數據量過多對小程序渲染界面有影響嗎？

答案是：有！一般情況下我們是在wxml中循環data，然後取出item.id和item.name,其他數據看起來和我們無關，但是查看官方文檔setData相關信息的時候有下面這一段話

setData 是小程序開發中使用最頻繁的接口，也是最容易引發性能問題的接口。在介紹常見的錯誤用法前，先簡單介紹一下 setData 背後的工作原理。

工作原理

小程序的視圖層目前使用 WebView 作為渲染載體，而邏輯層是由獨立的 JavascriptCore 作為運行環境。在架構上，WebView 和 JavascriptCore 都是獨立的模塊，並不具備數據直接共享的通道。當前，視圖層和邏輯層的數據傳輸，實際上通過兩邊提供的 evaluateJavascript 所實現。即用戶傳輸的數據，需要將其轉換為字符串形式傳遞，同時把轉換後的數據內容拼接成一份 JS 腳本，再通過執行 JS 腳本的形式傳遞到兩邊獨立環境。

而 evaluateJavascript 的執行會受很多方面的影響，數據到達視圖層並不是實時的。

其實就是我們setData裏面的所有數據都被轉成了字符串，然後字符串郵費轉換成JS腳本，然後頁面根據JS腳本去渲染頁面。那麽我們能做的就是盡量少傳數據，而此時後臺返回這一大串數據就與此相悖了，所以最好是新建一個tempData,將要的數據取出來之後再setDta這個tempData，以此來提高微信小程序的頁面渲染速度，提升微信小程序運行效率，優化微信小程序的用戶體驗。

我們可以這樣寫：

1. [mw_shl_code=applescript,true] var tempData = []
2. for(var i = 0; i < datas.length; i++) {
3. var tempObj = {}
4. tempObj.id = datas[i].id
5. tempObj.name = datas[i].name
6. tempData.push(tempObj)
7. }
8. console.log(tempData)
9. [/mw_shl_code]

或者使用高階函數map()：

1. let tempDatas = datas.map(function(data){
2. return {
3. id: data.id,
4. name: data.name
5. }
6. })
7. console.log(tempDatas)

此時我們再使用setData({})就能提高渲染效率了

同時再分享兩個setData技巧

1、有一個Object如下

obj:{a:"a",b:"b",c:"c"},

此時已經渲染到頁面了，然後我們修改了obj,此時可以選擇：

1）平時的做法

let obj = this.data.objobj.b = "我是後來修改的"this.setData({ obj: obj})

2）但是更優化的做法是

this.setData({ ‘obj.b‘: "我是後來修改的"})

不僅省了兩行代碼，同時還提高頁面渲染效率2、其實和1差不多，就是Object變成數組Array當我們要給數組的其中一個數據進行修改時，我們可以參照上面的方法

this.setData({ ‘array[1]‘: "我是後來修改的"})

當我們要給數組的多個數據進行修改時，我們會寫一個循環，然後修改array,此時是無法識別的,要寫成如下形式

1. for(var i = 0;i < 5;i++) {
2. this.setData({ [`array[${i}]`]:"我是後來修改的"
3. }) }

小夥伴們還有其他有關微信小程序setData的其他知識點，歡迎留言哦，同時知道為上面那個為啥要加 []的，希望多多指教！

專欄作家

韋弦zhy 。小程序社區博主。分享小程序開發實戰，堅持原創。

本文原創發布於小程序社區。未經許可，禁止轉載
原文地址：微信小程序後臺返回大量多余數據的處理-小程序社區/博主專區-微信小程序開發社區-微信小程序聯盟

相關文章

微信小程序 使用wxs計算獲取到的數據

微信小程序JSON數據的傳遞
小程序頁面效果之--滑動屏幕加載數據

微信小程序後臺返回大量多余數據的處理