这一节主要演示如何新增、修改和删除对象数据中单个/多个属性，我们直接使用微信开发者工具进行演示；
新增单个/多个属性
- 在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：
Page({
// 在小程序页面中所需要使用的数据均来自 data 对象
data: {
userInfo: {}
},
// 新增单个 / 多个属性
updateUserInfo() {
this.setData({
// 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c
'userInfo.name': 'tom'
})
}
})
- 在 pages/cate/cate.wxml 中添加对应的页面样式，如下：
<view>{{ userInfo.name }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>
刷新页面，点击按钮，可以发现新增的 name 值在页面上显示了，如下：
如果需要新增多个属性值，写法是一样的，也要写成一个数据路径，下面演示一下新增多个属性：
- 在 pages/cate/cate.wxml 中添加对应的页面样式，如下：
<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>
- 在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：
Page({
// 在小程序页面中所需要使用的数据均来自 data 对象
data: {
userInfo: {}
},
// 新增单个 / 多个属性
updateUserInfo() {
this.setData({
// 如果给对象新增属性，可以将 key 写成数据路径的方式 a.b.c
'userInfo.name': 'tom',
'userInfo.age': 10
})
}
})
刷新页面，点击按钮，可以发现新增的 name 值和 age 值在页面上显示了，如下：
修改单个/多个属性
- 在 pages/cate/cate.wxml 中添加对应的页面样式，如下：
<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>
- 在 pages/cate/cate.js 中添加数据声明和对应的新增属性方法，如下：
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 展开运算符方法
Page({
// 在小程序页面中所需要使用的数据均来自 data 对象
data: {
userInfo: {
'name': 'tom',
'age': 10
}
},
// 修改单个 / 多个属性
updateUserInfo(){
// ES6 提供的展开运算符
// 通过展开运算符能够将对象中的属性复制给另一个对象
// 后面的属性会覆盖前面的属性
const userInfo = {
...this.userInfo,
name: 'jerry',
age: 18
}
this.setData({
userInfo
})
},
})
- Object.assign 方法
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 中添加数据声明和对应的删除属性方法，如下：
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
})
},
})
上面介绍的方法只是修改对象类型数据的其中一种方法，并不是所有，我们可以使用其它的修改对象数据的方法；
参考视频：尚硅谷微信小程序开发教程