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


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.Encode手动解码技巧
Jul 14 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
详解JavaScript对象类型
Jun 16 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
玩转Koa之核心原理分析
Dec 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开发GUI
2006/10/09 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python执行精确的小数计算方法
2019/01/21 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python帮你识破双11的套路
2019/11/11 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
学校教师读书活动总结
2014/07/08 职场文书
ktv好的活动方案
2014/08/17 职场文书
干部考核工作总结
2015/08/12 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技