摘要：修改數(shù)組這個(gè)參數(shù)的具體作用，請(qǐng)參考微信小程序官方提供的說(shuō)明，地址為在通過(guò)在頁(yè)面里使用傳遞過(guò)來(lái)的，是為識(shí)別正在編輯修改哪個(gè)數(shù)組。我們也會(huì)不定期發(fā)布一些微信小程序的學(xué)習(xí)教程。

相信在小程序推出公測(cè)之后，很多小伙伴都已經(jīng)抓緊申請(qǐng)注冊(cè)小程序了。在開發(fā)階段中也碰到了很多的問題，例如wx.request數(shù)據(jù)請(qǐng)求不成功，在數(shù)組操作時(shí)，不知道如何往數(shù)組里push數(shù)據(jù)，input如何監(jiān)聽用戶輸入的狀態(tài)，css的background-image無(wú)法獲取本地資源等等，本博客會(huì)出一個(gè)專題，給碰到這些問題的小伙伴解決思路。

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

這是簡(jiǎn)單做的一個(gè)demo，已經(jīng)上傳到github，到時(shí)大伙可以直接下載。我們主要講在數(shù)組中常用的一些操作方法，對(duì)數(shù)組向前向后插入新的數(shù)據(jù)、修改數(shù)組、刪除數(shù)組、清空數(shù)組，其他的一些操作方式，我會(huì)給大伙學(xué)習(xí)思路。

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

demo數(shù)組操作的例子路徑：
/pages/array/array.wxml

Page({
  data: {
        list:[{
        id:1,
        name:"應(yīng)季鮮果",
        count:1
        },{
        id:2,
        name:"精致糕點(diǎn)",
        count:6
        },{
        id:3,
        name:"全球美食烘培原料",
        count:12
        },{
        id:4,
        name:"無(wú)辣不歡生猛海鮮",
        count:5
        }]
  }
})

我們初始化一些數(shù)據(jù)，我們需要對(duì)list的添加新的數(shù)據(jù)里，需要用到JavaScript concat()的方法，concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組，該方法不會(huì)改變現(xiàn)有的數(shù)組。
其實(shí)我們的所說(shuō)的向前向后插入數(shù)據(jù)，其實(shí)也就是把兩個(gè)數(shù)組合拼起來(lái)，組成一個(gè)新的數(shù)組，然后再使用this.setData()即可渲染到頁(yè)面上。
我們看一下在微信小程序里的代碼。

向前插入數(shù)據(jù)demo

 //向前增加數(shù)據(jù)
  add_before:function (){

  
//要增加的數(shù)組
var newarray = [{
    id:6,
    name:"向前增加數(shù)據(jù)--"+new Date().getTime() ,
    count:89
}];
      
//使用concat()來(lái)把兩個(gè)數(shù)組合拼起來(lái)
this.data.list = newarray.concat(this.data.list);
    
//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層，即渲染頁(yè)面
//大伙請(qǐng)記錄，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`，頁(yè)面才會(huì)渲染數(shù)據(jù)的。
this.setData({
      "list":    this.data.list
 });
      
      
  }

向后插入數(shù)據(jù)demo

  //向后增加數(shù)據(jù)
  add_after:function (){

    //要增加的數(shù)組
    var newarray = [{
            id:5,
            name:"向后增加數(shù)據(jù)--"+new Date().getTime() ,
            count:89
    }];
    

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

細(xì)心的小伙伴應(yīng)該會(huì)發(fā)現(xiàn)，這兩段在用concat()合拼數(shù)據(jù)時(shí)，concat括號(hào)里的數(shù)據(jù)是不一樣的。向前向后插入數(shù)據(jù)的區(qū)別就在這里了。

//假設(shè)這一段是我們要新增的數(shù)組
var newarray = [{
        id:5,
        name:"向后增加數(shù)據(jù)--"+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);

對(duì)展示的數(shù)據(jù)進(jìn)行修改，在開發(fā)過(guò)程是常見得不在常見的事情啦。

  //修改數(shù)組
  edit:function (e){
      
//這個(gè)參數(shù)“e”的具體作用，請(qǐng)參考微信小程序官方提供的說(shuō)明，地址為https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161107
    
var dataset = e.target.dataset;
var Index = dataset.index; //在通過(guò)在wxml頁(yè)面里使用 data-index="{{index}}"傳遞過(guò)來(lái)的，是為識(shí)別正在編輯修改哪個(gè)數(shù)組。
      
//我們要修改的數(shù)組
this.data.list[Index].name = "修改了內(nèi)容"+new Date().getTime();
      
//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層，即渲染頁(yè)面
//大伙請(qǐng)記錄，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`，頁(yè)面才會(huì)渲染數(shù)據(jù)的。
this.setData({
    list:this.data.list
});
      
      
      
  }

有增有改也必有刪。
刪除需要用到JavaScript splice() 方式，splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。

//刪除
  remove:function (e){
      
    var dataset = e.target.dataset;
    var Index = dataset.index;
    
    //通過(guò)`index`識(shí)別要?jiǎng)h除第幾條數(shù)據(jù)，第二個(gè)數(shù)據(jù)為要?jiǎng)h除的項(xiàng)目數(shù)量，通常為1
    this.data.list.splice(Index,1);
    
    //渲染數(shù)據(jù)
    this.setData({
        list:this.data.list
    });
      
      
  }

增修刪之后，還得再來(lái)一個(gè)清空數(shù)據(jù)呀。

//清空
  clear:function (){
      
    //其實(shí)就是讓數(shù)組變成一個(gè)空數(shù)組即可
      this.setData({
          list:{}
      });
      
  } 

今天我們主要講了增修刪清空，其實(shí)對(duì)數(shù)組的操作還有很多方式的，可以看以下截圖。

具體的每一個(gè)的操作方法，可以去國(guó)內(nèi)的w3s多學(xué)習(xí)下。
http://www.w3school.com.cn/js...

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

最近大家對(duì)微信小程序開發(fā)熱情大漲，結(jié)識(shí)了不少對(duì)微信小程序技術(shù)開發(fā)的牛人，也有一些剛?cè)胄械男率?，特此我建立了一個(gè)微信小程序技術(shù)交流圈子，希望給大伙有一個(gè)純潔的技術(shù)交流圈子，技術(shù)交流，提升自我。我們也會(huì)不定期發(fā)布一些微信小程序的學(xué)習(xí)教程。
此群的目標(biāo)為純（干）純（貨）的技術(shù)交流群，不死于廣告之中，已開啟了群主邀請(qǐng)確認(rèn)機(jī)制，需要入群的小伙伴，請(qǐng)加我的個(gè)人微信amwhuang。（備注：小程序入群）

文章首發(fā)地址：
數(shù)組操作--微信小程序?qū)W習(xí)教程
http://lanchenglv.com/article...
如需轉(zhuǎn)載，請(qǐng)標(biāo)明轉(zhuǎn)載出處，謝謝。