ES2020 双问号操作符的用法详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理变量为空或未定义的情况。在 ES2020 中，双问号（??）操作符被引入，可以帮助我们更容易地处理这种情况。本文将详细介绍双问号操作符的用法。

双问号操作符的定义与使用

双问号操作符是一个逻辑运算符，它的目的是在变量为空或未定义的情况下提供一个默认值。它的用法如下：

result = a ?? b;

上述代码的意思是，如果 a 的值为 null 或 undefined，则将 b 的值赋给 result。如果 a 不为空，则将 a 的值赋给 result。

下面我们来看一些具体的例子。

const foo = null;
const bar = 'default';

const result = foo ?? bar;

console.log(result); // 输出：default

在上述代码中，foo 的值为 null，所以使用 ?? 操作符将 bar 的值 default 赋给了 result。

let foo;

const result = foo ?? 'default';

console.log(result); // 输出：default

在上述代码中，foo 未定义，即为 undefined，所以使用 ?? 操作符将 default 赋给了 result。

const foo = 'hello world';
const bar = 'default';

const result = foo ?? bar;

console.log(result); // 输出：hello world

在上述代码中，foo 不为空，即为 'hello world'，所以使用 ?? 操作符将 foo 的值赋给了 result。

双问号操作符只会在左侧的值为 null 或 undefined 时生效，其他 falsy 值（例如 0、''、false 等）不会被当作空值处理。
双问号操作符优先级比 || 和 && 都要低，因此需要注意运算顺序。

双问号操作符是一个实用的逻辑运算符，能够快速地处理变量为空或未定义的情况。它已经在现代浏览器中得到了广泛的支持，对于前端开发来说具有重要的学习和指导意义。在实际开发中，我们应当充分利用双问号操作符，使代码更加简洁明了。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530d7027d4982a6eb267861