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


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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
js实现内置计时器
Dec 16 Javascript
JS变量提升原理与用法实例浅析
May 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python根据服务获取端口号的方法
2019/09/25 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
J2EE面试题
2016/03/14 面试题
决定成败的关键——创业计划书
2014/01/24 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
工程造价专业求职信
2014/07/17 职场文书
培训班通知
2015/04/25 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript