微信小程式如何解決後台傳回大量多餘資料的問題

這篇文章帶給大家的內容是關於微信小程式如何解決後台返回大量多餘數據的問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

類似這種：

datas:[
 {
 id:1000,
 name: "帅哥"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 {
 id:1001,
 name: "美女"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 ...
]

其實我只要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，以此來提高微信小程式的頁面渲染速度，提升微信小程式運作效率，優化微信小程式的使用者體驗。
我們可以這樣寫：

[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]

或使用高階函數map()：

let tempDatas = datas.map(function(data){
 return {
 id: data.id,
 name: data.name 
 } 
 })
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,此時是無法識別的,要寫成如下形式

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

相關推薦：

微信小程式中格式化時間的程式碼實作

以上是微信小程式如何解決後台傳回大量多餘資料的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！