ECMAScript 2020 是 JavaScript 的最新版本,它引入了两个新的运算符:可选链运算符和 Nullish 合并运算符。这两个运算符可以帮助开发者编写更加简洁、安全和可读性更高的代码。
可选链运算符
在 JavaScript 中,当我们尝试访问一个对象的属性或方法时,如果该对象为 null 或 undefined,那么程序就会抛出一个 TypeError 错误。为了避免这种错误,我们通常需要添加一些条件判断语句来检查对象是否存在。
可选链运算符(?.)可以帮助我们简化这个过程。它允许我们在访问对象的属性或方法时,添加一个问号(?)来表示如果对象为 null 或 undefined,就不再继续执行后面的操作,而是直接返回 undefined。
例如,我们有一个对象 person,它有一个属性 name,我们可以这样访问它:
----- ---- - ------ - ----------- - ----------
使用可选链运算符,我们可以简化这个过程:
----- ---- - -------------
如果 person 为 null 或 undefined,那么 name 就会被赋值为 undefined。
可选链运算符不仅可以用于访问对象的属性或方法,还可以用于访问数组的元素,例如:
----- --- - --- -- --- ----- ----- - ---------
如果 arr 为 null 或 undefined,那么 third 就会被赋值为 undefined。
Nullish 合并运算符
在 JavaScript 中,我们经常需要检查一个值是否为 null 或 undefined,并在其为 falsy 值时给它一个默认值。通常我们会使用 || 运算符来实现这个目的,例如:
----- ----- - ----- -- -------------
但是,当 input 为 falsy 值时,这个语句会返回 defaultValue,即使 input 的值为 0 或 '' 等 falsy 值。这可能会导致一些意外的行为。
Nullish 合并运算符(??)可以帮助我们解决这个问题。它只在 input 的值为 null 或 undefined 时才返回 defaultValue,其他 falsy 值都不会返回 defaultValue。
例如:
----- ----- - ----- -- -------------
如果 input 为 null 或 undefined,那么 value 就会被赋值为 defaultValue。
示例代码
下面是一个示例代码,演示如何使用可选链运算符和 Nullish 合并运算符:
----- ------ - - ----- ------ -------- - ----- ----------- ------- -------- ----- - -- ----- ---- - --------------------- -- ---------- ----- ----- - ------------- -- ---------- ------------------ -- ---------- ------------------- -- ---------
在上面的代码中,我们首先定义了一个 person 对象,它有一个 address 属性,address 又有一个 city 属性。我们使用可选链运算符来访问 address 和 city 属性,如果它们不存在,就返回 undefined。然后我们使用 Nullish 合并运算符来给 city 和 phone 变量一个默认值。最后,我们打印出 city 和 phone 的值,可以看到 city 的值为 'Shanghai',而 phone 的值为 'Unknown'。
总结
可选链运算符和 Nullish 合并运算符是 ECMAScript 2020 中引入的两个新的运算符,它们可以帮助我们编写更加简洁、安全和可读性更高的代码。学会使用这两个运算符,可以让你的代码更加优雅和健壮。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6628912dc9431a720c59289b