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


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 中的事件教程
Apr 05 Javascript
iis6+javascript Add an Extension File
Jun 13 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue项目实现多语言切换的思路
Sep 17 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 替换模板变量实现步骤
2009/08/24 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PDO::getAttribute讲解
2019/01/28 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python和Go语言的区别总结
2019/02/20 Python
如何通过Python实现标签云算法
2019/07/02 Python
python getpass模块用法及实例详解
2019/10/07 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python中过滤字符串列表的方法
2020/12/22 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
追悼会答谢词范文
2015/09/29 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Golang 入门 之url 包
2022/05/04 Golang