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


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 09 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
JavaScript生成指定范围的时间列表
Mar 19 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制作文本式留言板
2015/03/18 PHP
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
js表单验证实例讲解
2016/03/31 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
热爱劳动主题班会
2015/08/14 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python