空值合并运算符是 ES2020 中的新特性，它允许我们轻松地处理变量为空或未定义的情况。本文将介绍空值合并运算符的应用，包括如何使用它来简化代码、避免错误以及提高代码的可读性。
空值合并运算符是什么？
空值合并运算符（Nullish Coalescing Operator）是一个新的运算符，由两个问号（??）组成。它的作用是当左侧的表达式为 null 或 undefined 时，返回右侧的表达式。否则，返回左侧的表达式。
下面是一个示例：
const foo = null ?? 'default'; console.log(foo); // 'default' const bar = 'hello' ?? 'default'; console.log(bar); // 'hello'
在第一个示例中，foo 的值为 null，因此空值合并运算符返回右侧的默认值。在第二个示例中，bar 的值为字符串 'hello'，因此空值合并运算符返回左侧的表达式。
空值合并运算符的应用
简化代码
空值合并运算符可以简化代码，特别是在处理默认值时。以前，我们需要使用 || 运算符来设置默认值，但这种方法有一个问题，它会将 falsy 值（如空字符串、0、false 等）误认为是未定义的值，从而返回默认值。空值合并运算符不会出现这种问题，因为它只在左侧的值为 null 或 undefined 时返回默认值。
下面是一个示例：
// 使用 || 运算符设置默认值 const name1 = name || 'default'; // 使用空值合并运算符设置默认值 const name2 = name ?? 'default';
在这个示例中，name 变量的值可能为字符串、null 或 undefined。如果使用 || 运算符，当 name 的值为空字符串、0 或 false 时，将返回默认值 'default'，这可能不是我们想要的结果。如果使用空值合并运算符，只有当 name 的值为 null 或 undefined 时，才会返回默认值 'default'。
避免错误
使用空值合并运算符可以避免一些常见的错误。例如，当我们尝试访问一个未定义的变量时，通常会抛出一个 ReferenceError 错误。但是，如果我们使用空值合并运算符，可以避免这个错误的发生。
下面是一个示例：
const obj = { name: 'Alice', age: 18, }; const address = obj.address ?? 'unknown'; console.log(address); // 'unknown'
在这个示例中，obj 对象没有定义 address 属性。如果我们尝试直接访问 obj.address，将抛出一个 ReferenceError 错误。但是，如果我们使用空值合并运算符，将返回默认值 'unknown'，避免了这个错误的发生。
提高代码的可读性
使用空值合并运算符可以提高代码的可读性，特别是在处理嵌套对象时。以前，我们需要使用多个三元运算符或条件语句来处理嵌套对象中的默认值。使用空值合并运算符，可以将这些逻辑合并为一个简单的表达式。
下面是一个示例：
-- -------------------- ---- ------- ----- ---- - - ----- -------- -------- - ----- ---------- -------- -------- -- -- ----- ------- - -------------------- -- ---------- --------------------- -- -------展开代码
在这个示例中，我们使用空值合并运算符获取 user.address.country 属性的值。如果 user 或 user.address 为 null 或 undefined，将返回默认值 'unknown'。这种方法比使用多个三元运算符或条件语句更简洁、更易读。
总结
空值合并运算符是 ES2020 中的新特性，它允许我们轻松地处理变量为空或未定义的情况。使用空值合并运算符可以简化代码、避免错误以及提高代码的可读性。当我们需要处理默认值或嵌套对象时，建议使用空值合并运算符来简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66124c72d10417a2222e7ef8
