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之间,只有当leftExprnull或者 undefined时取rightExpr,否则取leftExpr0,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"
  ]
}
+
(^_^)打赏作者喝个咖啡(^_^)
微信支付
支付宝支付
如果觉得文章写得不错或对您有用,请随意打赏。点击文章右下角“喜欢”二字,您的支持是我最大的鼓励
打赏支持
我要收藏
返回顶部
跳到底部
posted @   风雨后见彩虹  阅读(3660)  评论(2编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2018-12-17 《JavaScript高级程序设计》笔记:函数表达式(七)
点击右上角即可分享
微信分享提示