简介
在 JavaScript 的语法中，经常会出现变量或对象属性为空的情况，这时候就需要对其进行判断，以避免出现错误。在 ES11 中，引入了两种新的语法：空值合并和可选链，它们都能够简化代码，提高开发效率。
本文将详细介绍空值合并和可选链的使用方法和区别，并通过示例代码帮助读者更好地理解这两种语法。
空值合并
空值合并运算符（??）是一种新的语法，用于判断某个变量是否为空，如果为空，则返回默认值。这个操作符在处理 null 或 undefined 时非常有用。
示例代码：
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 的值为 null 或 undefined，则返回默认值 'default'。如果变量 baz 的值不为空，则返回变量的值 'value'。
可选链
可选链（?.）也是一种新的语法，用于在对象属性为空的情况下，避免出现错误。通常在访问对象属性时，需要先判断其是否为空，如果为空，则会出现错误。使用可选链可以简化判断过程，并且保证代码的稳定性。
示例代码：
-- -------------------- ---- -------
----- --- - -
---- -
---- -------
-
--
----- ------ - -------------
-------------------- -- -------
----- ------ - -------------
-------------------- -- ---------在上述代码中，如果对象 obj 的属性 foo 或 bar 为空，则不会出现错误，而是返回 undefined。如果对象 obj 的属性 foo 不为空，但属性 baz 为空，则也不会出现错误，而是返回 undefined。
区别与使用场景
空值合并和可选链的使用场景不同，主要区别如下：
- 空值合并适用于判断变量是否为空，如果为空则返回默认值，常用于函数参数的默认值。
- 可选链适用于访问对象属性时，如果属性为空则返回 undefined，常用于深层次的对象属性访问。
示例代码：
-- -------------------- ---- -------
-------- ------------- -
----- ----------- - ----------
------ ---- -- ------------
-
----- --- - -
---- -
---- -------
-
--
----- ----- - ------------- -- ----------
------------------- -- -------在上述代码中，函数 getName 使用空值合并语法，如果参数 name 为空，则返回默认值 'default'。而对象 obj 使用可选链语法，如果属性 foo 或 bar 为空，则返回默认值 'default'。
总结
空值合并和可选链是 ES11 中的两种新语法，它们都能够简化代码，提高开发效率。空值合并适用于判断变量是否为空，如果为空则返回默认值；可选链适用于访问对象属性时，如果属性为空则返回 undefined。
在实际开发中，可以根据具体场景选择使用空值合并或可选链，以达到更好的代码效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66028458d10417a222e399a9