蓝狐锅锅微信小程序实用教程系列一数组操作-Indexof.PDFVIP

蓝狐锅锅：微信小程序实用教程系列《一》数组操作 前言 相信在小程序推出公测之后，很多小伙伴都已经抓紧申请注册小程序了。在开发阶段中也碰到了很多的问题，例如 wx.request 数据请求不成功，在数组操作时，不知 道如何往数组里 push 数据，input 如何监听用户输入的状态，css 的 background-image 无法获取本地资源等等，本博客会出一个专题，给碰到这些问题的小伙伴解 决思路。 数组操作 今天我们主要讲的是，数组操作。 相信对于用过 vuejs、reactjs 等 mvvm 框架的童鞋，微信小程序的数组操作就显得很简单啦，原理是一样的。 这是简单做的一个 demo ，已经上传到github ，到时大伙可以直接下载。我们主要讲在数组中常用的一些操作方法，对数组向前向后插入新的数据、修改数组、删除数 组、清空数组，其他的一些操作方式，我会给大伙学习思路。 demo 数组操作的例子路径 ： /pages/array/array.wxml 向前向后插入新的数据 Page({ data: { list:[{ id:1, name:应季鲜果, count:1 },{ id:2, name:精致糕点, count:6 },{ id:3, name:全球美食烘培原料, count:12 },{ id:4, name:无辣不欢生猛海鲜, count:5 }] } }) 我们初始化一些数据，我们需要对 list 的添加新的数据里，需要用到 JavaScript concat()的方法 ，concat() 方法用于连接两个或多个数组，该方法不会 改变现有的数组。 其实我们的所说的向前向后插入数据，其实也就是把两个数组合拼起来，组成一个新的数组，然后再使用 this.setData()即可渲染 到页面上。 我们看一下在微信小程序里的代码。 向前插入数据demo //向前增加数据 add_before:function (){ //要增加的数组 var newarray = [{ id:6, name:向前增加数据--+new Date().getTime() , count:89 }]; //使用 concat()来把两个数组合拼起来 this.data.list = newarray.concat(this.data.list); //将合拼之后的数据，发送到视图层，即渲染页面 //大伙请记录，修改了数据后，一定要再次执行`this.setData()` ，页面才会渲染数据的。 this.setData({ list: this.data.list }); } 向后插入数据demo //向后增加数据 add_after:function (){ //要增加的数组 var newarray = [{ id:5, name:向后增加数据--+new Date().getTime() , count:89 }]; this.setData({ list:this.data.list.concat(newarray) }); }, 细心的小伙伴应该会发现，这两段在用 concat()合拼数据时，concat 括号里的数据是不一样的。向前向后插入数据的区别就在这里了。 //假设这一段是我们要新增的数组 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.c