藍(lán)狐鍋鍋：微信小程序?qū)嵱媒坛滔盗小兑弧窋?shù)組操作
前言
相信在小程序推出公測(cè)之后，很多小伙伴都已經(jīng)抓緊申請(qǐng)注冊(cè)小程序了。在開(kāi)發(fā)階段中也碰到了很多的問(wèn)題，例如wx.request數(shù)據(jù)請(qǐng)求不成功，在數(shù)組操作時(shí)，不知道如何往數(shù)組里push數(shù)據(jù)，input如何監(jiān)聽(tīng)用戶(hù)輸入的狀態(tài)，css的background-image無(wú)法獲取本地資源等等，本博客會(huì)出一個(gè)專(zhuān)題，給碰到這些問(wèn)題的小伙伴解決思路。
數(shù)組操作
今天我們主要講的是，數(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數(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:'無(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);
修改數(shù)組
對(duì)展示的數(shù)據(jù)進(jìn)行修改，在開(kāi)發(fā)過(guò)程是常見(jiàn)得不在常見(jiàn)的事情啦。
//修改數(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
});
}
刪除某條數(shù)據(jù)
有增有改也必有刪。 刪除需要用到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
});
}
清空數(shù)據(jù)
增修刪之后，還得再來(lái)一個(gè)清空數(shù)據(jù)呀。
//清空
clear:function (){
//其實(shí)就是讓數(shù)組變成一個(gè)空數(shù)組即可
this.setData({
list:{}
});
}
總結(jié)
