背景
明天又被 QA 找: 这个页面昨天还好好的, 明天就白屏了, 是不是你代码有问题啊, 连忙看看。
下来一看,找到了起因:
本来 pickup
, dropoff
两个字段没有数据的话,应该返回 {}
, 后果当初pickup
字段返回了null
, 而咱们取值的时候,也没对这个中央做进攻。
list: openApiOrderInfo.pickup.address_list,
后果就是:脚本报错,页面不可用。
解决起来也很简略,要么给个 默认值
,要么应用 ?.
做一层进攻。
改完再试一下,就 OK 了,页面恢复正常。
上面咱们就说一下这个 ?.
明天的次要内容:
- 什么是可选链操作符(
?.
) - 如何启用这个性能
- 可选链操作符(
?.
) 是如何工作的 Heny
公布的相干些材料- 总结
注释语种
可选链操作符(?.
),大家都很相熟了,这里再简略回顾一下。
什么是可选链操作符(?.
)
可选链操作符 (?.
) 容许读取位于连贯对象链深处的属性的值,而不用明确验证链中的每个援用是否无效。
比方,思考一个存在嵌套构造的对象 obj。不应用可选链的话,查找一个深度嵌套的子属性时,须要验证之间的援用,例如:
let nestedProp = obj.first && obj.first.second;
为了防止报错,在拜访 obj.first.second 之前,要保障 obj.first 的值既不是 null,也不是 undefined。
如果只是间接拜访 obj.first.second,而不对 obj.first 进行校验,则有可能抛出谬误。
有了可选链操作符(?.),在拜访 obj.first.second 之前,不再须要明确地校验 obj.first 的状态,再并用短路计算获取最终后果:
let nestedProp = obj.first?.second;
这等价于以下表达式,但实际上没有创立长期变量:
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
?.
操作符的性能相似于 .
链式操作符,不同之处在于:
在援用为空 (nullish) (null
或者 undefined
) 的状况下 不会引起谬误
,该表达式短路返回值是: undefined
。
与函数调用一起应用时,如果给定的函数不存在,则返回 undefined
。
当尝试拜访 可能不存在的对象属性
时,应用 可选链操作符
将会使表达式 更短、更扼要
。
有两点须要咱们注意:
- 如果存在一个属性名且不是函数, 应用 ?. 依然会产生一个 TypeError 异样 (x.y is not a function).
let result = someInterface.customMethod?.();
如果 someInterface 本身是 null 或者 undefined,异样 TypeError
仍会被抛出。
如果你心愿容许 someInterface 也为 null
或者 undefined
,那么你须要像这样写 someInterface?.customMethod?.()
- 可选链
不能用于赋值
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
如何启用这个性能
// install
npm install --save-dev @babel/plugin-proposal-optional-chaining
// babel config
{
"plugins": [
"@babel/plugin-proposal-optional-chaining" // 可选链
"@babel/plugin-proposal-nullish-coalescing-operator", // 双问号
]
}
可选链操作符(?.
) 是如何工作的
const a = {b: 1};
console.log(a?.b);
会被转换成:
const a = {b: 1};
console.log(a === null ? void 0 : a.b);
如果层级更深,会创立长期变量用于记录:
const a = {
b: {
c: 1,
d: 2,
}
};
console.log(a?.b?.c)
会被转换成:
var _a$b;
const a = {
b: {
c: 1,
d: 2
}
};
console.log(
a === null || a === void 0
? void 0
: (_a$b = a.b) === null || _a$b === void 0
? void 0
: _a$b.c
);
Heny
公布的相干些材料
Heny 目前是 babel
我的项目的负责人,之前发过一片介绍以后 babel 窘境的文章。
上图推文链接:https://twitter.com/left_pad/…
感兴趣的能够去看看。
总结
?.
应用起来是十分不便的, 但如果用的不好,也会暗藏本应该裸露进去的问题。
所以, 应用的时候肯定要分明本人在做什么。
?.
还有个小兄弟叫 空值合并运算符(??)
, 这里就不说了,去 MDN 看文档吧。
明天就这么多,心愿对大家有所启发。