JS的可选链操作符（?.）与双问号（??），你用到了吗？

原创已于 2023-09-27 22:49:50 修改 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

于 2023-09-25 21:43:45 首次发布

ES6 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中的可选链操作符(?.)和双问号操作符(??)，它们简化了对可能为null或undefined的对象属性和方法的访问。文章还指导了如何在Babel7及以上版本中启用这两个提案作为插件，以在工程中使用这些新特性。

可选链操作符（?.）

以前一般这样使用：

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"
  ]
}