1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到一些判断,在处理一些情况的时候,判断该值是不是undefined和null,但是我们可以使用可选链操作符来处理,使方法更加的简单。
4.什么是可选链操作?
可选链操作符(?.)允许读取位于连接对象链深处的属性的值,
而不必明确验证链中的每个引用是否有效。
?.操作符的功能类似于 .链式操作符,不同之处在遇到,
在引用为空(null或者是 undefined)的情况下不会引起错误,
该表达式短路返回值是undefined。
与函数调用一起使用时,如果给定的函数不存在,则返回 undefied
当尝试访问可能不存在的属性时,可选链操作符将会使表达式更短/更简明。
在探索一个对象的内容使,如果不能确定那些属性必定存在,
可选链操作也是很有帮助的。
通过连接的对象的引用或函数可能是undefined或null时,
可选链操作符提供了一种方法来简化被连接对象的值访问。5.比如,思考一个存在嵌套结构的对象 obj。不使用可选链的话,查找一个深度嵌套的子属性时,需要验证之间的引用
let nestedProp = obj.first && obj.first.second;为了避免报错,在访问 obj.first.second之前,
要保证 obj.first的值既不是null,也不是 undefined
如果只是直接访问 obj.first.second,
而不对 obj.first 进行校验,则有可能抛出错误。6.有了可选链操作符(?.),在访问 obj.first.second之前,不再需要明确地校验 obj.first的状态,再并用短路计算获取最终结果:
let nestedProp = obj.first?.second;通过使用 ?. 操作符取代 .操作符,JavaScript会再尝试访问 obj.first.second之前,
先隐式地检查并确定
obj.first既不是 null也不是undefined。
如果 obj.first是null或者是undefined,表达式将会短路计算直接返回 undefined。7.这等价与以下表达式,但实际上没有创建临时变量:
let temp=obj.first;
let nestedProp=((temp===null || temp=== undefined)?undefined:temp.second);8.可选链与函数调用
当尝试 调用一个可能不存在的方法时也可以使用可选链。这将时很有帮助的,
比如,当使用一个API的方法可能不可用时,
要么因为版本问题要么因为当前用户的设备不支持该功能。
函数调用时如果被调用的方法不存在,
使用可选链可以使表达式自动返回 undefined而不是抛出一个异常。
let result =someInterface.customMethod?.();注意:如果存在一个属性名且不是函数,使用 ?. 仍然会产生以恶搞
TypeError 异常(x.y is not a function)
注意:如果 someInterface 自身使 null或者使 undefined,
异常 TypeError 仍会被抛出 someInterface sis null
如果你希望允许 someInterface 也为null或者 undefined,
那么你需要像这样写 someInterface?.fcustomeMethod?.()9.处理可选的回调函数或者事件处理器
如果使用 结构赋值来解构的一个对象的回调函数或fetch方法,
你可能得到不能当函数直接调用的不存在的值,除非你已经校验了他们的存在性。
使用 ?.的你可以忽略这些额外的校验:// ES 2019的写法
function doSomething(onContent,onError){
try {
// ... do something with the data
}
catch(err){
if(onError) // 校验 onError是否真的存在
onError(err.message);
}
}
}10.可选链和表达式
当使用括号与函数名的形式来访问属性时,你可以使用可选链操作符:let nestedProp=obj?.['prop'+'Name'];11.可选链不能用于赋值:
let object={}
object?.property=1;
// Uncaught SyntaxError:Invalid left-hand side in assignment 12.可选链访问数组元素:
let arrayItem=arr?.[42];13.如下的例子在一个不含 bar 成员的Map中查找 bar成员的 name 属性,因此结果时 undefined。
let maMap=new Map();
myMap.set("foo",{name:"baz",desc:"inga"});
let nameBar=myMap.get("bar")?.name;14.短路计算
// 当表达式中使用可选链时,如果左操作数时 null 或 undefined,
表达式将不会被计算,例如:
let potenttiallyNullObj=null;
let x=0;
let prop=potentiallyNullObj?.[x++];
console.log(x); // x 将不会被递增,依旧输出 015.连用可选链操作符:
可以连续使用可选链读取多层嵌套结构:
let customer={
name:"Carl",
details:{
age:82,
loaction:"paradise Falls " //details 的address 属性未有定义
}
}
let customerCity=customer.details?.address?.city;
// ... 可选链也可以和函数调用一起使用
let duration=vacations.trip?.getTime.();16.使用空值合并操作符:
空值合并操作符可以在使用可选链时设置一个默认值:
let customer={
name:"Carl",
details:{age:82},
}
let customerCity=customer?.city ?? "暗之城";
console.log(customerCity); // "暗之城"17.由于目前可选链仅在提案阶段,浏览器暂时还不支持,因此需要使用babel进行转化,下面我就来介绍一下在vue项目中再template中使用可选链。
// 在template中使用(目前Vue默认是不支持在template中使用
// 可选链操作符的,如果我们想要实现可选链类似的效果,
// 需要绕一个弯,方法如下:)
/**
* 解决Vue Template模板中无法使用可选链的问题
* @param obj
* @param rest
* @returns {*}
*/
export const optionalChaining = (obj, ...rest) => {
let tmp = obj;
for (let key in rest) {
let name = rest[key];
tmp = tmp?.[name];
}
return tmp || "";
};18.在对应的.vue下面
// return代码:
return {
userInfo: {
wxInfo: {
addressInfo: {
address: "Mars",
},
},
},
};// template代码如下:
{{
this.$Methods.optionalChaining(
userInfo,
"wxInfo",
"addressInfo",
"address"
)
}}
//效果如下:
19.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。