可选链操作符(?.)
以前一般这样使用:
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"
]
}