【微信小程序】数组操作

Page({
  data: {
        list:[{
        id:1,
        name:'应季鲜果',
        count:1
        },{
        id:2,
        name:'精致糕点',
        count:6
        },{
        id:3,
        name:'全球美食烘培原料',
        count:12
        },{
        id:4,
        name:'无辣不欢生猛海鲜',
        count:5
        }]
  }
})

一、向前向后新增数组

//假设这一段是我们要新增的数组
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);

//页面渲染数据
this.setData({
      'list':    this.data.list
 });

二、修改数组

//修改数组
  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
});
 
}

三、删除数据

//删除
  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:{}
      });
 
  }

Array对象方法列表

【微信小程序】数组操作

猜你喜欢