博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序setData复杂数组的更新、删除、添加、拼接
阅读量:2167 次
发布时间:2019-05-01

本文共 1194 字,大约阅读时间需要 3 分钟。

众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染。在此分享小程序里复杂数组的更新、删除、添加、拼接

 

初始数据

数组嵌套对象

data: {    cartList: [{ id: 1, goods: {id: 1, name: 'wechat'}, checked: true }, { id: 2, goods: {}, checked: false }, { id: 3, goods: {}, checked: true }] },

索引部分删除

let index = 2;let cartList = this.data.cartListcartList.splice(index, 1)this.setData({        cartList: cartList      })

内部部分修改

只修改数据内某项里的某属性。但此方法对于有引用到被修改的数据的wxs不会刷新页面显示,尚未清楚是bug还是小程序本身就不支持。

 

let index = 2let updateTodo = `cartList[${index}].checked`this.setData({          [updateTodo]:  true        })

用一个变量接收要修改的数组,修改好后再整体setData赋值,如果原数据很大的话可能会影响性能。

let index = 2let cartList = this.data.cartList;cartList[index].checked = res.data.checkedthis.setData({          cartList: cartList        })

添加、拼接

push和concat

 

// push改变原数组let newList=  [{ id: 4, goods: {}, checked: true }, { id: 5, goods: {}, checked: false }}]let cartList = this.data.cartList;cartList.push(...newList);this.setData({          cartList: cartList        })// concat返回添加后的副本,并不会修改原有数组let newList=  [{ id: 4, goods: {}, checked: true }, { id: 5, goods: {}, checked: false }}]let cartList = this.data.cartList;this.setData({          cartList: cartList.concat(newList)        })

转载自:

你可能感兴趣的文章
图解什么是 Transformer
查看>>
代码实例:如何使用 TensorFlow 2.0 Preview
查看>>
6 种用 LSTM 做时间序列预测的模型结构 - Keras 实现
查看>>
走进JavaWeb技术世界1:JavaWeb的由来和基础知识
查看>>
走进JavaWeb技术世界2:JSP与Servlet的曾经与现在
查看>>
走进JavaWeb技术世界3:JDBC的进化与连接池技术
查看>>
走进JavaWeb技术世界4:Servlet 工作原理详解
查看>>
走进JavaWeb技术世界5:初探Tomcat的HTTP请求过程
查看>>
走进JavaWeb技术世界6:Tomcat5总体架构剖析
查看>>
走进JavaWeb技术世界7:Tomcat和其他WEB容器的区别
查看>>
走进JavaWeb技术世界9:Java日志系统的诞生与发展
查看>>
走进JavaWeb技术世界10:从JavaBean讲到Spring
查看>>
走进JavaWeb技术世界11:单元测试框架Junit
查看>>
走进JavaWeb技术世界12:从手动编译打包到项目构建工具Maven
查看>>
走进JavaWeb技术世界13:Hibernate入门经典与注解式开发
查看>>
走进JavaWeb技术世界14:Mybatis入门
查看>>
走进JavaWeb技术世界16:极简配置的SpringBoot
查看>>
初探Java设计模式1:创建型模式(工厂,单例等)
查看>>
初探Java设计模式2:结构型模式(代理模式,适配器模式等)
查看>>
初探Java设计模式3:行为型模式(策略,观察者等)
查看>>