众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染。在此分享小程序里复杂数组的更新、删除、添加、拼接
初始数据
数组嵌套对象
data: { cartList = [{ id: 1, goods: {id: 1, name: ‘wechat‘}, checked: true }, { id: 2, goods: {}, checked: false }, { id: 3, goods: {}, checked: true }] },
索引部分删除
1 let index = 2; 2 let cartList = this.data.cartList 3 cartList.splice(index, 1) 4 this.setData({ 5 cartList: cartList 6 })
内部部分修改
只修改数据内某项里的某属性。但此方法对于有引用到被修改的数据的wxs不会刷新页面显示,尚未清楚是bug还是小程序本身就不支持。
let index = 2 let updateTodo = `cartList[${index}].checked` this.setData({ [updateTodo]: true })
用一个变量接收要修改的数组,修改好后再整体setData赋值,如果原数据很大的话可能会影响性能。
1 let index = 2 2 let cartList = this.data.cartList; 3 cartList[index].checked = res.data.checked 4 this.setData({ 5 cartList: cartList 6 })
添加、拼接
push和concat
1 // push改变原数组 2 let newList= [{ id: 4, goods: {}, checked: true }, { id: 5, goods: {}, checked: false }}] 3 let cartList = this.data.cartList; 4 cartList.push(...newList); 5 this.setData({ 6 cartList: cartList 7 }) 8 9 // concat返回添加后的副本,并不会修改原有数组 10 let newList= [{ id: 4, goods: {}, checked: true }, { id: 5, goods: {}, checked: false }}] 11 let cartList = this.data.cartList; 12 this.setData({ 13 cartList: cartList.concat(newList) 14 })