概览:处理后端返回的数据data,写法:data?.name。解决vue框架编译出现的报错Cannot read property 'name' of undefined。出现问题的原因:这是因为我们试图访问对象中不在的 key 为 name 的属性,那么怎么解决呢?
若是当前对象不存在某个属性key,在vue中可以使用后缀修饰符,常用的是?和!。
代码举例:
const resData = res.data.data || []const params1 = reactive({shyx: resData?.age?.shyx,shzwh: resData?.age?.shzwh,whys: resData?.age?.whys,})const params2 = resData.area?.map((item) => {return {name: item.name,value: item.num}})const params3 = reactive({partymember: resData?.partyMember?.partymember,other: resData?.partyMember?.other,})
vue3中两种后缀运算符:
在Vue 3中,有两个后缀运算符:
?
和!
,分别表示可选属性和非空断言。
?
可选属性:表示该属性是可选的,如果该属性不存在,不会引发错误。
!
非空断言:表示该属性一定存在,如果该属性不存在,则会引发错误。
?后缀运算符:
示例代码:
const message = { text: 'Hello World' }
const greeting = message.text?.toUpperCase() // greeting = 'HELLO WORLD'
const emptyMessage = {}
const emptyGreeting = emptyMessage.text?.toUpperCase() // emptyGreeting = undefined
结果分析:
在上面的代码中,当
message
对象存在text
属性时,可以将text
属性的值转换为大写字母。而当emptyMessage
对象不存在text
属性时,使用?.
运算符访问text
属性不会引发错误,返回值为undefined
。
!后缀运算符:
实例代码:
const message = { text: 'Hello World' }
const greeting = message.text!.toUpperCase() // greeting = 'HELLO WORLD'
const emptyMessage = {}
const emptyGreeting = emptyMessage.text!.toUpperCase() // TypeError
结果分析:
在上面的代码中,当
message
对象存在text
属性时,可以将text
属性的值转换为大写字母。而当emptyMessage
对象不存在text
属性时,使用!
运算符访问text
属性会引发错误,因为该属性不存在。