微信小程序中數(shù)組操作的示例分析

小編給大家分享一下微信小程序中數(shù)組操作的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

相信在小程序推出公測之后，很多小伙伴都已經(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無法獲取本地資源等等。

數(shù)組操作

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

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

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

向前向后插入新的數(shù)據(jù)

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:'無辣不歡生猛海鮮',
        count:5
        }]
  }
})

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

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

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


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

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

//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層，即渲染頁面
//大伙請(qǐng)記錄，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`，頁面才會(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);

修改數(shù)組

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

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

//這個(gè)參數(shù)“e”的具體作用，請(qǐng)參考微信小程序官方提供的說明，地址為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}}"傳遞過來的，是為識(shí)別正在編輯修改哪個(gè)數(shù)組。

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

//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層，即渲染頁面
//大伙請(qǐng)記錄，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`，頁面才會(huì)渲染數(shù)據(jù)的。
this.setData({
    list:this.data.list
});



  }

刪除某條數(shù)據(jù)

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

//刪除
  remove:function (e){

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

    //通過`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
    });


  }

清空數(shù)據(jù)

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

//清空
  clear:function (){

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

  }

總結(jié)

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

以上是“微信小程序中數(shù)組操作的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！