JavaScript中的Null和Undefined默认值设置：??运算符VS.||运算符有什么不同？

2024-03-17 00:19:15

## ** Null 和 ** Undefined** 的默认值设置：** ??** vs. ** ||**

引言

在 JavaScript 的世界中，常常需要为可能为 null 或 undefined 的变量提供一个默认值。这可以通过使用 ??（空值合并）和 ||（逻辑或）运算符来实现。虽然这两个运算符在某些情况下可以互换使用，但它们的细微差别可能会对代码的行为产生重大影响。

逻辑或（||）

逻辑或运算符（||）返回第一个操作数的真值，如果第一个操作数为假，则返回第二个操作数的真值。换句话说，它检查第一个操作数是否为真，如果为假，则尝试使用第二个操作数。

例如：

let userAge = false;
let defaultAge = userAge || 21; // defaultAge 为 21

在上面的示例中，userAge 为 false，这是一个假值。因此，|| 运算符返回第二个操作数 21，它是一个真值。

空值合并（??）

空值合并运算符（??）返回第一个操作数的值，如果第一个操作数为 null 或 undefined，则返回第二个操作数的值。换句话说，它检查第一个操作数是否为 null 或 undefined，如果是，则返回第二个操作数。

例如：

let userAge = null;
let defaultAge = userAge ?? 21; // defaultAge 为 21

在上面的示例中，userAge 为 null。因此，?? 运算符返回第二个操作数 21，因为 null 是一个假值。

何时使用 ** ??**

?? 运算符最适合用于希望在变量为 null 或 undefined 时提供默认值的情况。这通常用于设置对象的默认属性值，或者处理可能为 null 的 API 响应。

示例：

const user = {
  name: 'John',
  age: user.age ?? 21 // 如果 user.age 为 null 或 undefined，则将其设置为 21
};

何时使用 ** ||**

|| 运算符最适合用于希望在变量为假值（包括 null、undefined、0、false）时提供默认值的情况。这通常用于检查布尔条件，或者设置在特定条件下应该为真或假的值。

示例：

const isLoggedIn = user.loggedIn || false; // 如果 user.loggedIn 为 false 或 undefined，则将其设置为 false

细微差别：

?? 和 || 运算符在第一个操作数为假值时表现出不同的行为。|| 返回第二个操作数的真值，而 ?? 返回 null 或 undefined。这在处理需要为 null 或 undefined 值提供特定默认值时尤其重要。

例子：

let userAge = false;

// || 返回第二个操作数的真值
let age1 = userAge || 21; // age1 为 21

// ?? 返回 null 或 undefined
let age2 = userAge ?? 21; // age2 为 null

最佳实践：

在使用 ?? 和 || 运算符时，遵循以下最佳实践可以帮助避免错误：

结论

?? 和 || 运算符都是强大的工具，可以用来在 JavaScript 中为 null 或 undefined 值提供默认值。通过了解它们的细微差别，你可以做出明智的决定，根据具体情况选择合适的运算符。

常见问题解答

探索Web开发资源和人工智能教程的代码社区

扫码关注微信公众号