【ES6】可选链操作符和空值合并操作符(链式调用防报错非常使用)
可选链操作符 ?.
例子 a.b?.c?.d
可以在调用前先验证调用属性,若引用为空(null或undefined)则发生短路,不执行之后代码也不抛出异常,表达式返回undefined。
也可以和函数一起使用,若函数不存在,也不抛出异常,返回undefined。
一、使用场景:
在对象的..链式调用时,配合可选链操作符,以防链式调用中出现null或者undefined,抛出异常导致程序错误。
在渲染早于异步请求数据的场景里,报undefined,非常实用。
二、原理:
链式操作符的原理似乎 等同于在调用先用if()或者&&判断引用是否存在。
首先如果不用链式操作符,如果链式调用层级加深,代码冗长且无可读性
let result = obj.first && obj.first.second
使用链式操作符
let result = obj.first?.second
实际等价于
let temp = obj.first //实际并没有创建temp这个变量
let result = ((temp === null || temp === undefined) ? undefined : temp.second);
三、其他一些场景(以上讨论均为可选链与对象)
1.可选链与函数调用
当你调用某个对象的api是否可用 let result = obj.functionApi?.()
2.处理可选的回调函数
// 常规写法
function callback(fn){
if(fn){
fn.call(this);
}
}
// 可选链写法
function callback(fn){
fn?.call(this);
}
3.可选链与表达式
使用方括号访问非法标识符['na!me!'] let result = obj?.['na!'+'me!']
属性访问器有点号.和方阔括号[]两种
4.可选链访问数组
let arrayItem = arr?.[42];
5.可选链不能用于赋值
let obj ={};
obj?.property = 1; // Uncaught SyntaxError: Invalid left-hand side inassignment
四、空值合并操作符
若访问属性值不为空,则正常引用。
若访问属性值为空,则用缺省值代替空值。
let hero = {
name: "paul",
details: { gender:male, age: 82 }
};
let heroAddress = hero?.address ?? "祖国";
console.log(heroAddress ); // “祖国”
五、可选链操作符出现兼容问题
vue里无论在模板或者JS代码处书写可选链,均可以使用。且目前所有浏览器均已兼容,除了IE(IE6月15日停运)
但是uniapp里模板使用可选链仍然报错,uniapp只能在js代码中使用可选链。解决办法:uniapp中可以使用computed计算完后再展示到模板代码中即可。
若你遇到的框架完全不兼容可选链操作符,则需另外单独下babel转译包。
// 安装依赖 npm install @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中 的 plugins中添加 "@babel/plugin-proposal-optional-chaining"
module.exports = {
plugins: [
'@babel/plugin-proposal-optional-chaining', //可选链 ?.
'@babel/plugin-proposal-nullish-coalescing-operator' //空值合并 ??
]
}
洗尽铅华始见金,褪去浮华归本真