前言
相信在小程序推出公測之后，很多小伙伴都已經(jīng)抓緊申請注冊小程序了。在開發(fā)階段中也碰到了很多的問題，例如
wx.request數(shù)據(jù)請求不成功卖擅，在數(shù)組操作時，不知道如何往數(shù)組里push數(shù)據(jù)坟冲，input如何監(jiān)聽用戶輸入的狀態(tài)磨镶，css的background-image無法獲取本地資源等等，本博客會出一個專題健提，給碰到這些問題的小伙伴解決思路琳猫。
數(shù)組操作
今天我們主要講的是，數(shù)組操作私痹。
相信對于用過vuejs脐嫂、reactjs等mvvm框架的童鞋，微信小程序的數(shù)組操作就顯得很簡單啦紊遵，原理是一樣的账千。
這是簡單做的一個demo，已經(jīng)上傳到github暗膜，到時大伙可以直接下載匀奏。我們主要講在數(shù)組中常用的一些操作方法，對數(shù)組向前向后插入新的數(shù)據(jù)学搜、修改數(shù)組娃善、刪除數(shù)組、清空數(shù)組瑞佩，其他的一些操作方式聚磺，我會給大伙學(xué)習(xí)思路。
demo地址：
https://github.com/bluefox1688/wxapp_study
demo數(shù)組操作的例子路徑：
/pages/array/array.wxml
向前向后插入新的數(shù)據(jù)
Page({
data: {
list:[{
id:1,
name:'應(yīng)季鮮果',
count:1
},{
id:2,
name:'精致糕點',
count:6
},{
id:3,
name:'全球美食烘培原料',
count:12
},{
id:4,
name:'無辣不歡生猛海鮮',
count:5
}]
}
})
我們初始化一些數(shù)據(jù)炬丸，我們需要對list的添加新的數(shù)據(jù)里瘫寝，需要用到JavaScript concat()的方法，concat() 方法用于連接兩個或多個數(shù)組稠炬，該方法不會改變現(xiàn)有的數(shù)組焕阿。
其實我們的所說的向前向后插入數(shù)據(jù)，其實也就是把兩個數(shù)組合拼起來酸纲，組成一個新的數(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()來把兩個數(shù)組合拼起來
this.data.list = newarray.concat(this.data.list);
//將合拼之后的數(shù)據(jù)栽惶，發(fā)送到視圖層，即渲染頁面
//大伙請記錄疾嗅，修改了數(shù)據(jù)后外厂，一定要再次執(zhí)行`this.setData()`，頁面才會渲染數(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)該會發(fā)現(xiàn)汁蝶，這兩段在用concat()合拼數(shù)據(jù)時，concat括號里的數(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ù)組
對展示的數(shù)據(jù)進(jìn)行修改，在開發(fā)過程是常見得不在常見的事情啦膀估。
//修改數(shù)組
edit:function (e){
//這個參數(shù)“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}}"傳遞過來的察纯，是為識別正在編輯修改哪個數(shù)組帕棉。
//我們要修改的數(shù)組
this.data.list[Index].name = '修改了內(nèi)容'+new Date().getTime();
//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層饼记，即渲染頁面
//大伙請記錄香伴，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`具则，頁面才會渲染數(shù)據(jù)的即纲。
this.setData({
list:this.data.list
});
}
刪除某條數(shù)據(jù)
有增有改也必有刪。
刪除需要用到JavaScript splice()方式博肋，splice() 方法向/從數(shù)組中添加/刪除項目低斋，然后返回被刪除的項目。
//刪除
remove:function (e){
var dataset = e.target.dataset;
var Index = dataset.index;
//通過`index`識別要刪除第幾條數(shù)據(jù)束昵，第二個數(shù)據(jù)為要刪除的項目數(shù)量拔稳，通常為1
this.data.list.splice(Index,1);
//渲染數(shù)據(jù)
this.setData({
list:this.data.list
});
}
清空數(shù)據(jù)
增修刪之后，還得再來一個清空數(shù)據(jù)呀锹雏。
//清空
clear:function (){
//其實就是讓數(shù)組變成一個空數(shù)組即可
this.setData({
list:{}
});
}
總結(jié)
今天我們主要講了增修刪清空巴比，其實對數(shù)組的操作還有很多方式的，可以看以下截圖礁遵。
具體的每一個的操作方法轻绞，可以去國內(nèi)的w3s多學(xué)習(xí)下。
http://www.w3school.com.cn/jsref/jsref_splice.asp
demo地址：
https://github.com/bluefox1688/wxapp_study
交流
最近大家對微信小程序開發(fā)熱情大漲佣耐，結(jié)識了不少對微信小程序技術(shù)開發(fā)的牛人政勃，也有一些剛?cè)胄械男率郑卮宋医⒘艘粋€微信小程序技術(shù)交流圈子兼砖，希望給大伙有一個純潔的技術(shù)交流圈子奸远，技術(shù)交流既棺，提升自我。我們也會不定期發(fā)布一些微信小程序的學(xué)習(xí)教程懒叛。
此群的目標(biāo)為純（干）純（貨）的技術(shù)交流群丸冕，不死于廣告之中，已開啟了群主邀請確認(rèn)機制薛窥，需要入群的小伙伴胖烛，請加我的個人微信amwhuang。（備注：小程序入群）
文章首發(fā)地址：
數(shù)組操作--微信小程序?qū)W習(xí)教程
http://lanchenglv.com/article/2016/1113/wxapp_array_concat_splice.html
如需轉(zhuǎn)載诅迷，請標(biāo)明轉(zhuǎn)載出處佩番，謝謝。
