微信小程序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)
        })