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


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 相关文章推荐
ajax异步刷新实现更新数据库
Dec 03 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Javascript & DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
微信小程序实现打卡签到页面
2020/09/21 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
理论讲解python多进程并发编程
2018/02/09 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
django解决跨域请求的问题
2018/11/11 Python
python文件拆分与重组实例
2018/12/10 Python
python matplotlib库的基本使用
2020/09/23 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
python Timer 类使用介绍
2020/12/28 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
迟到检讨书1000字
2014/01/15 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
同意离婚答辩状
2015/05/22 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
OpenCV-Python实现油画效果的实例
2021/06/08 Python