微信小程序开发系列(二十)·wxml语法·setData()修改对象类型数据、ES6 提供的展开运算符、delete和rest的用法
目录
3.2 Object.assign()将多个对象合并为一个对象
1. 新增单个、多个属性
找到cate.js文件,在其中创建一个空对象“userInfo”:
data:{
num: 1,
userInfo: {}
},
1.1 新增单个属性
找到cate.wxml文件,创建一个路径并且创建一个按钮,用于修改对象类型数据:
//创建一条线用于区分
<view class="line"></view>
<view>{{ userInfo.name }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>
找到cate.js文件,定义事件处理函数,首先给对象新增一个属性:
// 新增单个
this.setData({
// 如果给对象新增属性,可以将Key写成数据路径的方式 a.b.c
'userInfo.name':'tom'
})
此时点击“修改对象类型数据”按钮,会弹出“tom”属性:
1.2 新增多个属性
找到cate.wxml文件,在创建一个路径:
<view>{{ num }}</view>
<button bind:tap="updateNum">更新 num</button>
<view class="line"></view>
<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>
找到cate.js文件,定义事件处理函数,要想新增多个属性,创建多个路径就可以:
Page({
data:{
num: 1,
userInfo: {}
},
// 更新 num
updateNum(){
// 获取数据
// console.log(this.data.num)
// 通过赋值的方式直接修改数据
// this.data.num += 1
// console.log(this.data.num)
//能够修改数据,但是不能改变页面上的数据
// setData()方法有两个作用:
// 1. 更新数据
// 2. 驱动视图更新
this.setData({
// key:是需要更新的数据
// value:是最新的值
num: this.data.num + 1
})
console.log(this.data.num)
},
//更新 userInfo
updateUserInfo(){
// 新增单个、多个属性
this.setData({
// 如果给对象新增属性,可以将Key写成数据路径的方式 a.b.c
'userInfo.name':'tom',
'userInfo.age':10
})
}
})
此时点击“修改对象类型数据”按钮,会弹出“tom”和“10”的属性:
2. 修改单个、多个属性
2.1 修改单个属性
找到cate.js文件,在data中给userInfo赋初始属性:
data:{
num: 1,
userInfo: {
name:'tom',
age:'10'
}
},
修改属性仍可以使用this.setData进行修改:
// 修改单个
this.setData({
// 如果需要修改对象属性,可以将Key写成数据路径的方式 a.b.c
'userInfo.name':'jerry'
})
此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“jerry”:
2.2 修改多个属性
修改多个属性和新增多个属性相似,也是需要创建多个路径,对路径进行修改:
// 修改单个、多个属性
this.setData({
// 如果需要修改对象属性,可以将Key写成数据路径的方式 a.b.c
'userInfo.name':'jerry',
'userInfo.age':20
})
此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“jerry”,“10”属性修改为“20”:
3. 优化
根据以上我们可以发现,如果新增和修改都是用数据路径,要是新增和修改的数据量比较小的时候还能一个个敲上去,但是如果新增和修改的数据过多,每次都写数据路径就太过麻烦。
3.1 ES6 提供的展开运算符
ES6 提供的展开运算符,通过展开运算符能够将对象中的属性复制给另一个对象,后面的属性会覆盖前面的属性:
// ES6 提供的展开运算符
// 通过展开运算符能够将对象中的属性复制给另一个对象
// 后面的属性会覆盖前面的属性
const userInfo = {
...this.data.userInfo,
name:'jerry',
age:18
}
this.setData({
userInfo
})
通过在const对userInfo的值进行修改覆盖,在通过this操作使const中的userInfo复制给data里的userInfo实现属性的修改:
此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“jerry”,“10”属性修改为“18”:
3.2 Object.assign()将多个对象合并为一个对象
从后往前合并,若是遇到相同属性,以后面的为准:
// Object.assign()将多个对象合并为一个对象
// 从后往前合并,若是遇到相同属性,以后面的为准
const userInfo = Object.assign(this.data.userInfo, { name:'jerry'},{ name:'Lihua'},{ age:18 })
this.setData({
userInfo
})
例如:我们创建两个“name”,属性:
此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“Lihua”,“10”属性修改为“18”:
4. 删除单个、多个属性
4.1 删除单个属性
使用“delete”进行删除属性:
delete this.data.userInfo.age
不过,此时点击“修改对象类型数据”按钮,会发现页面数据并没有消失:
我们可以使用:
console.log(this.data.userInfo)
来打印输出数据,会发现此时已将“age”属性删除,但是页面上未进行更改:
根据以上我们可以发现此时数据只有“name”的属性,那么我们可以将删除完的数据直接复制给userIfo,让其进行显示:
delete this.data.userInfo.age
// console.log(this.data.userInfo)
this.setData({
userInfo: this.data.userInfo
})
此时点击“修改对象类型数据”按钮,会发现页面数据“age”已经删除:
4.2 删除多个属性
删除多个属性可以采用 rest 剩余参数。
此时数据有些少,我们可以先找到“data”在其中在加入一个属性:
data:{
num: 1,
userInfo: {
name:'tom',
age:10,
test:111
}
},
要想使其在页面显示,需要再找到cate.wxml文件,编写代码:
<view>{{ userInfo.test }}</view>
使用rest:
// 删除多个属性
// 剩余属性保存在rest
const { age,test, ...rest } = this.data.userInfo
this.setData({
userInfo: rest
})
此时点击“修改对象类型数据”按钮,会发现此时只有“name”保留:
原文地址:https://blog.csdn.net/MANONGDKY/article/details/136479379
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!