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


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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
动态样式类封装JS代码
Sep 02 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
JavaScript实现分页效果
Mar 28 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
聊聊JS ES6中的解构
Apr 29 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
详解PHP中的Traits
2015/07/29 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python小项目之五子棋游戏
2019/12/26 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Eclipse面试题
2014/03/22 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
学校安全管理责任书
2014/07/23 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
领导参观欢迎词
2015/01/26 职场文书
欠条样本
2015/07/03 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers