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


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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python解析最简单的验证码
2016/01/07 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python实现录音小程序
2020/10/26 Python
python多进程重复加载的解决方式
2019/12/13 Python
python如何代码集体右移
2020/07/20 Python
Python 日期与时间转换的方法
2020/08/01 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
迟到早退检讨书
2014/02/10 职场文书
保证书范文大全
2014/04/28 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
优秀员工自荐书
2015/03/06 职场文书
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL