在 JavaScript 中，我们经常会遇到处理空值的情况。例如，当我们从后端获取数据时，有些属性可能为空，而我们不希望在使用这些属性时遇到 undefined 或 null，因为这往往会导致程序崩溃或出现错误。
为了解决这个问题，ES12 中引入了一个新的运算符：空值合并运算符（nullish coalescing operator），它可以方便地处理空值情况，使我们的程序更加健壮。
空值合并运算符的语法
空值合并运算符的语法非常简单，它使用两个问号（??）表示：
const result = value1 ?? value2;
它的意义是：如果 value1 不是 undefined 或 null，则使用 value1，否则使用 value2。
空值合并运算符的示例
下面是一个使用空值合并运算符的简单示例，它演示了怎样使用空值合并运算符来处理变量可能为 undefined 或 null 的情况：
const foo = null ?? 'default'; console.log(foo); // 'default' const bar = undefined ?? 'default'; console.log(bar); // 'default' const baz = 'value' ?? 'default'; console.log(baz); // 'value'
在上面的代码中，我们使用 ?? 运算符来确保 foo 和 bar 始终被赋予一个默认值，即 'default'。
而对于 baz，因为其值不是 undefined 或 null，所以直接使用其本身的值。
空值合并运算符与逻辑或运算符的区别
在使用空值合并运算符时，有些人可能会认为它与逻辑或运算符（||）的功能相似，但实际上它们是有区别的。
在 JavaScript 中，当使用逻辑或运算符时，如果左侧的表达式为假值（false、0、''、null、undefined 或 NaN），则返回右侧的值。
而使用空值合并运算符时，只有左侧的值为 undefined 或 null 时，才会使用右侧的值。
下面是一个说明两者区别的示例：
-- -------------------- ---- ------- ----- --- - -- -- ---------- ----------------- -- --------- ----- --- - ---- -- ---------- ----------------- -- --------- ----- --- - --------- -- ---------- ----------------- -- --------- ----- --- - - -- ---------- ----------------- -- --------- ----- ---- - --- -- ---------- ------------------ -- --------- ----- ----- - ----- -- ---------- ------------------- -- --------- ----- ------ - -- -- ---------- -------------------- -- -- ----- ------ - ---- -- ---------- -------------------- -- --------- ----- ----- - --------- -- ---------- ------------------- -- --------- ----- ---- - - -- ---------- ------------------ -- - ----- ----- - --- -- ---------- ------------------- -- --- ----- ----- - ----- -- ---------- ------------------- -- -----
在上面的代码中，我们可以看到，在使用逻辑或运算符时，只有在左侧的值是假值时，才会使用右侧的值；而在使用空值合并运算符时，只有在左侧的值是 undefined 或 null 时，才会使用右侧的值。
如何在实践中使用空值合并运算符
在实践中，我们可以使用空值合并运算符来简化代码，避免出现 undefined 或 null 异常。
例如，当我们从后端获取数据时，有些属性可能为空，我们可以使用空值合并运算符来确保属性值非空，从而避免程序崩溃或出现错误：
const data = fetchDataFromBackend();
const name = data.name ?? 'Unknown';
const age = data.age ?? 'Unknown';
console.log(`Name: ${name}, Age: ${age}`);在上面的代码中，我们使用了空值合并运算符来确保 name 和 age 变量的值非空。如果 data 对象的 name 或 age 属性为空，它们的值将会被设置为 'Unknown'。
总结
空值合并运算符是 ES12 中引入的一个新的运算符，它可以帮助我们处理可能为空值的情况，使我们的程序更加健壮。
它与逻辑或运算符的区别在于：逻辑或运算符在左侧值为假值时，才会使用右侧值；而空值合并运算符只有在左侧值为 undefined 或 null 时，才会使用右侧值。
在实践中，我们可以使用空值合并运算符来简化代码，避免出现 undefined 或 null 异常，从而使程序更加健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650027f695b1f8cacde5a41b