小程序 wxml 语法 —— 37 setData() - 修改对象类型数据

这一节主要演示如何新增、修改和删除对象数据中单个/多个属性，我们直接使用微信开发者工具进行演示；

新增单个/多个属性

在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：

javascript 复制代码

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    userInfo: {}
  },

  // 新增单个 / 多个属性
  updateUserInfo() {
    this.setData({
      // 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c
      'userInfo.name': 'tom'
    })
  }
})

在 pages/cate/cate.wxml 中添加对应的页面样式，如下：

html 复制代码

<view>{{ userInfo.name }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

刷新页面，点击按钮，可以发现新增的 name 值在页面上显示了，如下：

如果需要新增多个属性值，写法是一样的，也要写成一个数据路径，下面演示一下新增多个属性：

在 pages/cate/cate.wxml 中添加对应的页面样式，如下：

javascript 复制代码

<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：

javascript 复制代码

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    userInfo: {}
  },

  // 新增单个 / 多个属性
  updateUserInfo() {
    this.setData({
      // 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c
      'userInfo.name': 'tom',
      'userInfo.age': 10
    })
  }
})

刷新页面，点击按钮，可以发现新增的 name 值和 age 值在页面上显示了，如下：

修改单个/多个属性

在 pages/cate/cate.wxml 中添加对应的页面样式，如下：

javascript 复制代码

<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：

javascript 复制代码

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    userInfo: {
      'name': 'tom',
      'age': 10
    }
  },
  // 修改单个 / 多个属性
  updateUserInfo(){
    this.setData({
    // 如果给对象修改属性，可以将 key 写成数据路径的方式 a.b.c
    'userInfo.name': 'jerry',
    'userInfo.age': 18
    })
  }
})

刷新页面，点击按钮，可以发现修改的 name 值和 age 值在页面上显示了，如下：

在上面的演示中，不管新增数据或者修改数据，都需要使用数据路径的方式 a.b.c，使用起来比较麻烦，所以我们需要优化一下，我们可以使用 ES6 提供的展开运算符和 Object.assign() ；

ES6 展开运算符方法

javascript 复制代码

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    userInfo: {
      'name': 'tom',
      'age': 10
    }
  },
  // 修改单个 / 多个属性
  updateUserInfo(){
    // ES6 提供的展开运算符
    // 通过展开运算符能够将对象中的属性复制给另一个对象
    // 后面的属性会覆盖前面的属性
    const userInfo = {
      ...this.userInfo,
      name: 'jerry',
      age: 18
    }

    this.setData({
      userInfo
    })
  },
})

Object.assign 方法

javascript 复制代码

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    userInfo: {
      'name': 'tom',
      'age': 10
    }
  },
  
  // 修改单个 / 多个属性
  updateUserInfo(){
    const userInfo = Object.assign(this.data.userInfo, {name: 'jerry'}, {age: 18});
    this.setData({
      userInfo
    })
  },
})

删除单个/多个属性

在 pages/cate/cate.js 中添加数据声明和对应的删除属性方法，如下：

javascript 复制代码

Page({
  // 在小程序页面中所需要使用的数据均来自 data 对象
  data: {
    userInfo: {
      'name': 'tom',
      'age': 10,
      'test': 111
    }
  },
  // 删除单个 / 多个属性
  updateUserInfo(){
    // 删除单个属性
    delete this.data.userInfo.age
    this.setData({
      userInfo: this.data.userInfo
    })

    // 删除多个属性
    const {age, test, ...rest} = this.data.userInfo

    this.setData({
      userInfo: rest
    })
  },
})

上面介绍的方法只是修改对象类型数据的其中一种方法，并不是所有，我们可以使用其它的修改对象数据的方法；

参考视频：尚硅谷微信小程序开发教程