更新数据

小程序中修改数据并不能直接进行赋值,而是要通过调用 this.setData 方法才能实现

将需要修改的数据以 key:value 的形式传给 this.setData 方法。

this.setData 方法有两个作用：

更新数据
驱动视图更新

修改普通类型数据

1Page({
2  // 页面的初始数据
3  data: {
4    num: 1
5  },
6
7  updateNum() {
8    this.setData({
9      // key 是需要修改的数据
10      // value 是最新值
11      num: this.data.num + 1
12    })
13  }
14}

修改对象类型数据

在实际开发中,我们经常会在 data 中声明对象类型的数据,小程序中通过调用 setData 方法可以修改页面的数据,包括对象类型的数据。下面是修改对象类型数据的方法：

定义一个对象

1Page({
2  // 定义页面中使用的数据
3  data: {
4    userInfo: {
5      name: 'Tom',
6      age: 10,
7      gender: '男'
8    }
9  }
10}

修改对象中的单个属性：

1this.setData({
2  'userInfo.name': 'Jerry'
3})

修改对象中的多个属性

1// 修改对象中的多个属性
2this.setData({
3  'userInfo.name': 'Jerry',
4  'userInfo.age': 100
5})

使用 ES6 的展开运算符

在修改对象类型的数据时,可以使用 ES6 的展开运算符先复制对象,然后利用新值对旧值覆盖的方式修改

1const userInfo = {
2  ...this.data.userInfo,
3  name: 'Jerry',
4  age: 100
5}
6
7// 修改对象中的多个属性
8this.setData({
9  userInfo
10})

使用解构赋值修改对象属性

在修改对象类型的数据时,可以使用解构赋值来修改对象属性

1// 将 userInfo 从 data 中进行解构
2const { userInfo } = this.data
3// 产生一份新数据
4const newUserInfo = {
5  ...userInfo,
6  name: 'Jerry',
7  age: 100
8}
9// 修改对象中的多个属性
10this.setData({
11  userInfo: newUserInfo
12})

使用 Object.assign 方法合并对象

在修改对象类型的数据时,可以使用 Object.assign 方法将多个对象合并为一个对象

1// 使用 Object.assign 方法将多个对象合并为一个对象
2const userInfo = Object.assign(
3  this.data.userInfo, 
4  { name: 'Jerry' },
5  { age: 100 }
6)
7
8// 修改对象中的多个属性
9this.setData({
10  userInfo
11})

删除对象中的属性

在删除对象中的属性时,不能使用 delete 操作符,因为小程序的数据绑定机制不支持监听 delete 操作

1// 使用展开运算符拷贝一份数据,产生一个新对象
2const newUser = { ...this.data.userInfo }
3// 使用 delete 删除新对象中的属性
4delete newUser.age
5
6this.setData({
7  // 将新的对象进行赋值
8  userInfo: newUser
9})

📌 注意事项：

小程序的数据绑定机制只能监听到 setData 方法中修改的数据,无法监听到直接删除属性的操作,所以在删除对象属性时,需要先将对象复制一份再进行操作,然后再调用 setData 方法更新数据。

修改数组类型数据

数组类型数据也是经常会使用的数据格式之一,下面是修改数组类型数据的方法：

定义一个数组

1Page({
2  // 定义页面中使用的数据
3  data: {
4    animalList: ['Tom', 'Jerry', 'Spyke']
5  }
6
7  // coding...
8}

使用数组的 concat 方法合并数组

在修改数组类型的数据时,可以使用数组的 concat 方法来合并数组

1// 使用 concat 方法来合并数组
2const newList = this.data.animalList.concat('Tyke')
3
4// 使用 setData 进行赋值
5this.setData({
6  animalList: newList
7})

使用数组的 push 方法新增属性

在修改数组类型的数据时,可以使用数组的 push 方法来添加元素

1// 使用数组的 push 方法来添加元素
2this.data.animalList.push('Tyke')
3
4// 使用 setData 进行赋值
5this.setData({
6  animalList: this.data.animalList
7})

使用 ES6 的展开运算符

在数组类型的数据时,可以使用 ES6 的展开运算符先复制数组,然后进行合并

1// 使用 ES6 的展开运算符先复制数组,然后进行合并
2const newList = [...this.data.animalList, 'Tyke']
3
4// 使用 setData 进行赋值
5this.setData({
6  animalList: newList
7})

修改数组中某个元素的值：

利用索引的方式进行修改,但必须使用 wx:for 来进行渲染数组,否则会出现错误
```
1this.setData({
2  'animalList[2]': 'Tyke' 
3})
```

使用数组的 filter 方法删除元素

在修改数组类型的数据时,可以使用数组的 filter 方法来删除元素

1// 使用数组的 filter 方法来删除元素
2const newList = this.data.animalList.filter(item => item !== 'Tom')
3
4// 使用 setData 进行赋值
5this.setData({
6  animalList: newList
7})

更新数据#

修改普通类型数据#

修改对象类型数据#

修改数组类型数据#

更新数据

修改普通类型数据

修改对象类型数据

修改数组类型数据