JS的可选链操作符(?.)与双问号(??),你用到了吗?
文章目录
可选链操作符(?.)
以前一般这样使用:
let nestedProp = obj.first && obj.first.second;
或者这样:
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
现在我们这样使用:
let nestedProp = obj.first?.second; // 访问属性
let result = someInterface.customMethod?.(); // 调用方法
let nestedProp = obj?.['prop' + 'Name']; // 表达式
let arrayItem = arr?.[42]; // 访问数组
详细使用可参考:Optional chaining (?.)
双问号(??)
语法:
leftExpr ?? rightExpr
??
在leftExpr和rightExpr之间,只有当leftExpr
为null
或者 undefined
时取rightExpr
,否则取leftExpr
(0
,false
,""
被认为是有意义的,所以还是取leftExpr
)
以前这样使用:
let foo;
let someDummyText = foo || 'Hello!';
基础示例:
const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;
const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;
console.log(valA); // "default for A"
console.log(valB); // "" (as the empty string is not null or undefined)
console.log(valC); // 42
特殊示例:
null || undefined ?? "foo"; // raises a SyntaxError
true || undefined ?? "foo"; // raises a SyntaxError
(null || undefined) ?? "foo"; // returns "foo"
详细使用可参考:Nullish coalescing operator (??)
工程中怎样使用
babel7以上版本支持,可以添加以下2个devDependencies依赖:
@babel/plugin-proposal-optional-chaining // 可选链
@babel/plugin-proposal-nullish-coalescing-operator // 双问号
在.babelrc
或者babel.config.js
中这加入2个插件(plugins属性放在JSON顶层):
{
"plugins": [
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining"
]
}
+
(^_^)打赏作者喝个咖啡(^_^)


我要收藏
返回顶部
跳到底部
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2018-12-17 《JavaScript高级程序设计》笔记:函数表达式(七)