數組操做--微信小程序學習教程

前言

相信在小程序推出公測以後，不少小夥伴都已經抓緊申請註冊小程序了。在開發階段中也碰到了不少的問題，例如wx.request數據請求不成功，在數組操做時，不知道如何往數組裏push數據，input如何監聽用戶輸入的狀態，css的background-image沒法獲取本地資源等等，本博客會出一個專題，給碰到這些問題的小夥伴解決思路。

數組操做

今天咱們主要講的是，數組操做。
相信對於用過vuejs、reactjs等mvvm框架的童鞋，微信小程序的數組操做就顯得很簡單啦，原理是同樣的。

''

''

這是簡單作的一個demo，已經上傳到github，到時大夥能夠直接下載。咱們主要講在數組中經常使用的一些操做方法，對數組向前向後插入新的數據、修改數組、刪除數組、清空數組，其餘的一些操做方式，我會給大夥學習思路。

demo地址：
github.com/bluefox1688…

demo數組操做的例子路徑：
/pages/array/array.wxml

向前向後插入新的數據

Page({
  data: {
        list:[{
        id:1,
        name:'應季鮮果',
        count:1
        },{
        id:2,
        name:'精緻糕點',
        count:6
        },{
        id:3,
        name:'全球美食烘培原料',
        count:12
        },{
        id:4,
        name:'無辣不歡生猛海鮮',
        count:5
        }]
  }
})複製代碼

咱們初始化一些數據，咱們須要對list的添加新的數據裏，須要用到JavaScript concat()的方法，concat() 方法用於鏈接兩個或多個數組，該方法不會改變現有的數組。
其實咱們的所說的向前向後插入數據，其實也就是把兩個數組合拼起來，組成一個新的數組，而後再使用this.setData()便可渲染到頁面上。
咱們看一下在微信小程序裏的代碼。

向前插入數據demo

//向前增長數據
  add_before:function (){


//要增長的數組
var newarray = [{
    id:6,
    name:'向前增長數據--'+new Date().getTime() ,
    count:89
}];

//使用concat()來把兩個數組合拼起來
this.data.list = newarray.concat(this.data.list);

//將合拼以後的數據，發送到視圖層，即渲染頁面
//大夥請記錄，修改了數據後，必定要再次執行`this.setData()`，頁面纔會渲染數據的。
this.setData({
      'list':    this.data.list
 });


  }複製代碼

向後插入數據demo

//向後增長數據
  add_after:function (){

    //要增長的數組
    var newarray = [{
            id:5,
            name:'向後增長數據--'+new Date().getTime() ,
            count:89
    }];


    this.setData({
        'list':this.data.list.concat(newarray)
    });


  },複製代碼

細心的小夥伴應該會發現，這兩段在用concat()合拼數據時，concat括號裏的數據是不同的。向前向後插入數據的區別就在這裏了。

//假設這一段是咱們要新增的數組
var newarray = [{
        id:5,
        name:'向後增長數據--'+new Date().getTime() ,
        count:89
}];

//向前--用newarray與this.data.list合拼
this.data.list = newarray.concat(this.data.list);

//向後--用this.data.list與newarray合拼
this.data.list = this.data.list.concat(newarray);複製代碼

修改數組

對展現的數據進行修改，在開發過程是常見得不在常見的事情啦。

//修改數組
  edit:function (e){

//這個參數「e」的具體做用，請參考微信小程序官方提供的說明，地址爲https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161107

var dataset = e.target.dataset;
var Index = dataset.index; //在經過在wxml頁面裏使用 data-index="{{index}}"傳遞過來的，是爲識別正在編輯修改哪一個數組。

//咱們要修改的數組
this.data.list[Index].name = '修改了內容'+new Date().getTime();

//將合拼以後的數據，發送到視圖層，即渲染頁面
//大夥請記錄，修改了數據後，必定要再次執行`this.setData()`，頁面纔會渲染數據的。
this.setData({
    list:this.data.list
});



  }複製代碼

刪除某條數據

有增有改也必有刪。
刪除須要用到JavaScript splice()方式，splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。

//刪除
  remove:function (e){

    var dataset = e.target.dataset;
    var Index = dataset.index;

    //經過`index`識別要刪除第幾條數據，第二個數據爲要刪除的項目數量，一般爲1
    this.data.list.splice(Index,1);

    //渲染數據
    this.setData({
        list:this.data.list
    });


  }複製代碼

清空數據

增修刪以後，還得再來一個清空數據呀。

//清空
  clear:function (){

    //其實就是讓數組變成一個空數組便可
      this.setData({
          list:{}
      });

  }複製代碼

總結

今天咱們主要講了增修刪清空，其實對數組的操做還有不少方式的，能夠看如下截圖。

''

具體的每個的操做方法，能夠去國內的w3s多學習下。
www.w3school.com.cn/jsref/jsref…

demo地址：
github.com/bluefox1688…

交流

''

最近你們對微信小程序開發熱情大漲，結識了很多對微信小程序技術開發的牛人，也有一些剛入行的新手，特此我創建了一個微信小程序技術交流圈子，但願給大夥有一個純潔的技術交流圈子，技術交流，提高自我。咱們也會不按期發佈一些微信小程序的學習教程。
此羣的目標爲純（幹）純（貨）的技術交流羣，不死於廣告之中，已開啓了羣主邀請確認機制，須要入羣的小夥伴，請加個人我的微信amwhuang。（備註：小程序入羣）

文章首發地址：
數組操做--微信小程序學習教程
lanchenglv.com/article/201…如需轉載，請標明轉載出處，謝謝。