聊聊微信小程序的数组(Array)相关操作方法

提到微信小程序，相信大家都会了解一些，对于前端开发者来说，熟练掌握小程序开发，算是一项基本技能了。

开发过小程序的童鞋，刚开始的时候肯定遇到过很多坑，毕竟小程序开发和我们日常的PC、H5、APP开发，有些差距的，很多框架不能用，并且规范不一样。今天以“小程序”中的数组操作为主题来聊聊。

数组对象

小程序中的数组对象概念，跟原生JS基本一致的，所以我们首先要掌握javascript的数组对象Array，这里简单的说明下：

Array 对象

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Array 对象属性

Array 对象方法

基本就这些，因为内容太多了，就不一一说明了，大家不了解的话，可以去官方API去学习。当然了，小程序数组操作只是用到上面的一部分，具体看项目需求啦。

接下来拿例子来说明。

实例解析

比如我现在有一个自定义的数组：

Page({
  data: {
        list:[{
        id:1,
        name:'Web前端之家',
        count:1
        },{
        id:2,
        name:'Web前端之家2',
        count:6
        },{
        id:3,
        name:'Web前端之家3',
        count:12
        },{
        id:4,
        name:'Web前端之家4',
        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:{}
    });

}

上面只是常用的4种操作数组的方法，还是有很多方法，不过都是在上述方法中扩展的，比如tab切换改变数组值、轮播、K线图等等，这里就不一一说明了，如果您有任何麻烦和困然，可以加群讨论和咨询。

总结

总而言之，数组操作方法都是以原生javascript为基础的，所以要学好小程序开发，JS基础还是要够好，否则会很吃力，大家加油吧。