在 JavaScript 中，我们经常需要处理对象和数组的属性和元素，但是有时候这些属性或元素可能不存在或者为 null 或 undefined。在这些情况下，我们需要使用一些技术来确保代码安全和正确性。ES11 引入了两个新的操作符：可选链和 nullish coalescing，它们可以帮助我们更好地处理这些情况。
可选链
可选链操作符（?.）是一个比较简单但非常有用的操作符，它可以让我们在访问对象属性或方法时不用担心对象不存在或者属性不存在的情况。使用可选链操作符可以让我们更加简洁和安全地处理这些情况。
访问对象属性
考虑下面的代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ---------- -------- ------- - -- ----- ---- - -------------------- ------------------ -- --------- ----- -------- - ------------------------ ---------------------- -- --------- ----- ------ - --------------------------- -------------------- -- ---------- ------ ---- -------- ------ -- ---------展开代码
在上面的代码中，我们定义了一个 person 对象，它有一个 address 属性，address 属性又有一个 city 属性。我们首先访问了 person.address.city，它返回了正确的值。然后我们访问了 person.address.province，它返回了 undefined，这是因为该属性不存在。最后，我们试图访问 person.address.street.name，但是它会抛出 TypeError 异常，因为 address 和 street 都不存在。
我们可以使用可选链操作符来简化上面的代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ---------- -------- ------- - -- ----- ---- - --------------------- ------------------ -- --------- ----- -------- - ------------------------- ---------------------- -- --------- ----- ------ - ----------------------------- -------------------- -- ---------展开代码
在上面的代码中，我们使用了可选链操作符（?.）来访问对象的属性。当属性不存在时，它会返回 undefined，而不是抛出异常。如果属性存在，则会返回该属性的值。
调用方法
类似地，我们也可以使用可选链操作符来调用对象的方法。考虑下面的代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ---------- -------- ------- -- ---------- - ------------------- -- ---- -- --------------- - -- ------------------ -- ------- -- ---- -- ------ ----- ------ - -------------------------- -------------------- -- ---------展开代码
在上面的代码中，我们定义了一个 sayHello 方法，它可以打印出一个人的名字。我们首先调用了 person.sayHello()，它返回了正确的结果。然后我们试图调用 person.friend.sayHello()，但是它会抛出 TypeError 异常，因为 friend 和 sayHello 都不存在。
我们可以使用可选链操作符来简化上面的代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ---------- -------- ------- -- ---------- - ------------------- -- ---- -- --------------- - -- ------------------ -- ------- -- ---- -- ------ ----- ------ - ---------------------------- -------------------- -- ---------展开代码
在上面的代码中，我们使用了可选链操作符（?.）来调用对象的方法。当方法不存在时，它会返回 undefined，而不是抛出异常。如果方法存在，则会调用该方法并返回其结果。
Nullish Coalescing
nullish coalescing 操作符（??）是一个比较特殊但非常实用的操作符，它可以帮助我们判断一个值是否为 null 或 undefined，并在需要时提供一个默认值。使用 nullish coalescing 操作符可以让我们更加简洁和灵活地处理这些情况。
判断一个值是否为 null 或 undefined
考虑下面的代码：
const foo = null ?? 'default'; console.log(foo); // 'default' const bar = undefined ?? 'default'; console.log(bar); // 'default' const baz = 0 ?? 'default'; console.log(baz); // 0
在上面的代码中，我们使用了 nullish coalescing 操作符（??）来判断一个值是否为 null 或 undefined。如果该值为 null 或 undefined，则会返回默认值。如果该值为其他值，则会返回该值本身。
提供一个默认值
考虑下面的代码：
const foo = null || 'default'; console.log(foo); // 'default' const bar = undefined || 'default'; console.log(bar); // 'default' const baz = 0 || 'default'; console.log(baz); // 'default'
在上面的代码中，我们使用了逻辑或操作符（||）来提供默认值。如果该值为 falsy 值，则会返回默认值。如果该值为 truthy 值，则会返回该值本身。
但是这种方式有一个问题，当该值为 falsy 值时，它仍然会返回默认值，这可能不是我们想要的结果。例如，当该值为 0 或空字符串时，它仍然会返回默认值。这时候我们就需要使用 nullish coalescing 操作符来提供默认值了。
总结
ES11 引入了两个新的操作符：可选链和 nullish coalescing，它们可以帮助我们更好地处理对象和数组的属性和元素，并提供默认值。使用这些操作符可以让我们的代码更加简洁、安全和灵活。下面是一个完整的示例代码：
-- -------------------- ---- ------- ----- ------ - - ----- -------- -------- - ----- ---------- -------- ------- - -- ----- ---- - --------------------- ------------------ -- --------- ----- -------- - ------------------------- ---------------------- -- --------- ----- ------ - ----------------------------- -------------------- -- --------- ----- --- - ---- -- ---------- ----------------- -- --------- ----- --- - --------- -- ---------- ----------------- -- --------- ----- --- - - -- ---------- ----------------- -- -展开代码
希望本文对你理解可选链和 nullish coalescing 操作符有所帮助，并能在实际开发中应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bb600cadd4f0e0ff424b22
