今天又被 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
。
当尝试访问可能不存在的对象属性
时,使用可选链操作符
将会使表达式更短、更简明
。
有两点需要我们留意:
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 看文档吧。
今天就这么多, 希望对大家有所启发。
一、反常的SQL语句 某周四午休时分,我正在工位上小憩,睡梦中仿佛看到了自己拿...
前言 现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式...
css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。 为...
一只小奶狗会有名字、品种以及一堆可爱的特点作为其属性。如果将其建模为一个类...
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
至上一回分解完淘宝详情页( 点击查看 )后,再写了一篇关于商城基础模板装修首页...
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...