微信小程序 数组(增,删,改,查)等操作实例详解


Posted in Javascript onJanuary 05, 2017

微信小程序 数组(增,删,改,查)等操作

最近在做一个小程序的demo。由于不向后台请求数据,所以就涉及到对本地数据的操作,也遇到了一些坑,本文就以数组的增删改查为例,给新手分享一些经验。

微信小程序 数组(增,删,改,查)等操作实例详解

首先这是原始数据,json的数组。

我们尝试对改数据进行操作,同时渲染到页面。

1,数据的添加

微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 数组(增,删,改,查)等操作实例详解

在获取到表单的数据后,自己组装一个对象,然后通过push()的方法添加一条数据,注意push的数据的index是+1的,也就是说原本数组中index依次为0,1,2,新增加的就是3,依次类推。

如果想在前面插入数据,就要用到数组合并的操作了,concat()方法可以选择合并到前面或者后面例如newarray.concat(notes);。

2,数据的删除

微信小程序 数组(增,删,改,查)等操作实例详解

小程序里面貌似没有remove的方法,所以删除我选择的是split方法,这也是遇到的一个坑。notes.splice(id,i)就可以从index为id的位置开始,删除i个元素,这点大家都懂,看代码就明白,不再赘述

3,数据的修改

notes = obj可以把数组中index为i的元素设置为obj。

微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 数组(增,删,改,查)等操作实例详解微信小程序 数组(增,删,改,查)等操作实例详解

最后,如果要在修改数据的同时渲染到页面,一定要记得使用setData方法。

this.setData({    notes:notes })

顺便附上js里面array操作的方法列表。大家可以自己试试。

微信小程序 数组(增,删,改,查)等操作实例详解

Javascript 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
Prototype框架详解
Nov 25 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 #Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 #Javascript
jQuery电话号码验证实例
Jan 05 #Javascript
纯原生js实现table表格的增删
Jan 05 #Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 #Javascript
jQuery密码强度验证控件使用详解
Jan 05 #Javascript
jquery广告无缝轮播实例
Jan 05 #Javascript
You might like
Ajax PHP简单入门教程代码
2008/04/25 PHP
提高网站信任度的技巧
2008/10/17 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python中的getopt函数使用详解
2015/07/28 Python
python字符串的方法与操作大全
2018/01/30 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python实现键盘控制鼠标移动
2020/11/27 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
科研先进个人典型材料
2014/01/31 职场文书
带薪年假请假条
2014/02/04 职场文书
保密协议书范本
2014/04/22 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2014年教师节寄语
2014/08/11 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2015年招聘工作总结
2014/12/12 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
辛亥革命观后感
2015/06/02 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书