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


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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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
2020最新CPU的性能排名
2020/04/02 数码科技
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
求职自荐信范文格式
2013/11/29 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
中班幼儿评语大全
2014/04/30 职场文书
纪检监察建议书
2014/05/19 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server