微信小程序setData复杂数组的更新、删除、添加、拼接

众所周知，微信小程序里所有对数据的修改只有在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.cartList

 cartList.splice(index, 1)

 this.setData({

         cartList: cartList

       })

内部部分修改

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

let index = 2

let updateTodo = `cartList[${index}].checked`

this.setData({

          [updateTodo]:  true

        })

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

 let index = 2

 let cartList = this.data.cartList;

 cartList[index].checked = res.data.checked

 this.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)

         })

微信小程序setData复杂数组的更新、删除、添加、拼接的相关教程结束。