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


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中的Split使用方法与技巧
Mar 09 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
小程序云开发实战小结
Oct 25 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 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 max_execution_time执行时间问题
2011/07/17 PHP
jquery 指南/入门基础
2007/11/30 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
工作自我评价分享
2013/12/01 职场文书
学生励志演讲稿
2014/01/06 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
好人好事新闻稿
2015/07/17 职场文书
高中政治教师教学反思
2016/02/23 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android