摘要：修改數組這個參數的具體作用，請參考微信小程序官方提供的說明，地址為在通過在頁面里使用傳遞過來的，是為識別正在編輯修改哪個數組。我們也會不定期發布一些微信小程序的學習教程。

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

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

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

demo地址：
https://github.com/bluefox168...

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多學習下。
http://www.w3school.com.cn/js...

demo地址：
https://github.com/bluefox168...

最近大家對微信小程序開發熱情大漲，結識了不少對微信小程序技術開發的牛人，也有一些剛入行的新手，特此我建立了一個微信小程序技術交流圈子，希望給大伙有一個純潔的技術交流圈子，技術交流，提升自我。我們也會不定期發布一些微信小程序的學習教程。
此群的目標為純（干）純（貨）的技術交流群，不死于廣告之中，已開啟了群主邀請確認機制，需要入群的小伙伴，請加我的個人微信amwhuang。（備注：小程序入群）

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