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


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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
javascript常用功能汇总
Jul 05 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
vue使用canvas实现移动端手写签名
Sep 22 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 什么是PEAR?(第二篇)
2009/03/19 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python多进程fork()函数详解
2019/02/22 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
如何利用python生成MD5并去重
2020/12/07 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
.NET面试问题集
2015/12/08 面试题
办理信用卡收入证明范例
2014/09/13 职场文书
教师自荐信范文
2015/03/06 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android