1. 程式人生 > >微信小程式setData()方法的詳解以及對陣列/json操作

微信小程式setData()方法的詳解以及對陣列/json操作

一、setData()方法: 1、引數接受一個物件,以key,value的形式表示;

2、引數和變數名稱一致,可用一個值代替(es6新語法特性)

如上圖所示,在this.data中設定ceshi這條資料,在方法中,我們定義ceshi變數讓其等於that.data.ceshi; 然後對ceshi進行操作,其實就是對that.data.ceshi進行操作,而that.setData({ceshi})就等同於that.setData({ceshi : ceshi }) ; 第一個ceshi 是that.data.ceshi, 第二個ceshi 是我們定義的變數ceshi。通過列印的結果可以看到,資料已經新增上了。

3、可以設定一個或多個data資料

this.setData({    list:'change data',    info:'change data' })

4、key可以以資料路徑的形式給出(路徑形式的key必須帶引號)

this.setData({     'list[0].title' = 'change data',   //資料路徑key必須帶''號     'list[0].num' = 'change data'      //資料路徑key必須帶''號 })

5、key值可以為變數,為變數的時候要用[ ]引起來

page({   data:{     todos:[{id:0,text:'abc',isDelete:false}]   },   change(e){     var index = e.currentTarget.dataset.id;     var deletedtodo='todos['+index+'].idDelete';     this.setData({        [deletedtodo]:true     })   } })

如圖所示 deletedtodo為變數作為key值的時候要用[ ] 包裹起來。

6、直接修改this.data,雖然會改變資料,但是頁面不會重新渲染,無法改變頁面狀態,會造成資料不一致的情況

7、單次設定的資料不能超過1024KB,請儘量避免一次設定過多的資料

8、不需要在this.data中預先定義,使用setData()方法會自動建立該資料

this.setData({     name:'張三'   //name在this.data中未定義,但不會報錯 }) name在this.data中未定義,但是這種寫法不會報錯,而且還會在this.data.zhong建立name這條資料。可以用this.data.name獲取到該條資料

二、對陣列的操作,json操作和陣列一樣。

1、陣列的增加:

我們可以自己組裝一個物件如上圖的obj,然後用push()方法將其新增到資料的最後。注意push的資料的index是+1的,也就是說原本陣列中index依次為0,1,2,新增加的就是3,依次類推。如果想將資料插入到資料某個位置,那麼可以合理運用concat()的方法將資料合併到資料中。

也可以用splice()方法新增,第一個引數是插入的位置,第二個引數設為0,則為新增,若為大於0的的數字則為要刪除的個數,第三個引數只有在第二個引數為0是使用,是新增的內容。這種方法非常靈活,只需要改變第一個引數就可以將內容新增到資料的任何一個地方。下面附上splice的用法;

Splice splice()方法向/從陣列中新增/刪除元素,然後返回被刪除的元素組成的陣列。 用於陣列物件。 arr.splice(index, howmany, item1,…, itemX) 引數    描述 index    必需。整數,規定了新增/刪除元素的位置,使用負數可從陣列結尾處規定位置。 howmany    必需。要刪除的元素的數量。如果設定為0,則不會刪除元素。如果新增元素則這裡應該設定為0. itemX    可選。向陣列新增的新專案。在新增的時候用。 注意:這個方法會對原陣列做出修改。獲得的也是新陣列。

2、陣列的刪除:

刪除也是用splice()方法實現的,ceshi.splice(1,1)就是從index為1的位置開始,刪除1個元素。splice()用法參上。

3、陣列的修改:

將key值以資料路徑的形式賦值,可以達到修改資料中的某一條,此處,我們只將ceshi[0].value的值改變為'oooo',其他資料未發生變化。

也可以用這種方法修改陣列的引數,對這種方法有疑問的可以參考setData()第二條。 ---------------------  作者:NAMECZ  來源:CSDN  原文:https://blog.csdn.net/NAMECZ/article/details/79623550?utm_source=copy  版權宣告:本文為博主原創文章,轉載請附上博文連結!