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

Posted 不识少年愁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序setData复杂数组的更新删除添加拼接相关的知识,希望对你有一定的参考价值。

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

 

 

 

 

 

以上是关于微信小程序setData复杂数组的更新删除添加拼接的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序用 setData 方法修改 data 中对象数组某一项的属性值

微信小程序:setData的三种用法

微信小程序 setData 数组赋值数组出错了?

微信小程序oncameraframeios卡顿

小程序 setData 的详解

微信小程序 setData动态设置数组中的数据