ECMAScript 2020(ES2020)是 JavaScript 标准制定机构在 2020 年推出的新标准,其中最受关注的两个新特性是可选链和空值合并运算符。
可选链和空值合并运算符都解决了 JavaScript 中空值处理的问题,让开发者能够更加高效地处理不确定的数据。
可选链运算符
在 JavaScript 中,我们经常会遇到未定义或者空值的情况,在获取这些值的时候往往需要加入冗长的判断语句,如下所示:
if (person && person.address && person.address.street) { // Do something with person.address.street }
这种写法看起来比较麻烦,而且如果我们想要获得一个深层嵌套的属性,那么这个判断语句就会变得更加冗长。为了解决这个问题,可选链运算符(?.)应运而生。
可选链运算符允许我们在多层嵌套的对象上使用简洁且安全的语法来获取属性或者调用方法。如果属性或方法不存在,则可选链运算符会返回 undefined,而不是出现错误。
下面是一个使用可选链运算符的示例代码:
if (person?.address?.street) { // Do something with person.address.street }
在这个示例代码中,我们使用可选链运算符(?.)来检查嵌套对象中的属性是否存在,如果存在则返回属性值,否则返回 undefined,这样我们就不需要再写一堆冗长的判断语句。
除了获取属性值之外,可选链运算符还可以调用函数,例如:
person?.sayName?.();
如果 person 对象和 sayName 方法都存在,则会调用 sayName 方法,否则不会有任何影响。
空值合并运算符
空值合并运算符(??)是另一个解决 JavaScript 中空值处理的问题的新特性。在 JavaScript 中,空值包括 undefined 和 null。
在之前的 JavaScript 版本中,我们通常使用逻辑或运算符(||)来处理可能为空的变量,例如:
const name = person.name || "defaultName";
这种写法虽然能够处理空值情况,但是有一个缺陷,那就是当 person.name 属性的值为 false、0 或者空字符串时,也会被认为是空值,从而返回默认值。
为了避免上述问题,空值合并运算符(??)应运而生。空值合并运算符只有在左侧的值为 null 或者 undefined 时才会返回右侧的值。
例如:
const name = person.name ?? "defaultName";
在这个示例代码中,如果 person.name 为 null 或 undefined,则会返回 "defaultName",否则返回 person.name 的值。
空值合并运算符和可选链运算符可以组合使用,例如:
const name = person?.name ?? "defaultName";
如果 person 对象存在并且 name 属性存在,则返回 name 属性的值,否则返回 "defaultName"。如果去掉可选链运算符,则如果 person 对象不存在,将会导致出现 ReferenceError 错误。
总结与指导
ECMAScript 2020 中的可选链运算符和空值合并运算符都是解决 JavaScript 中空值处理的问题的新特性。在处理不确定的数据时可以使用这两个新特性,提高代码的简洁性和可读性。
在使用可选链运算符时应该注意,如果可选链运算符用于调用函数,那么在函数前面应该加上问号(?);在使用空值合并运算符时应该注意,不要误将 false、0 或者空字符串当作空值。
好的编码习惯能够帮助我们写出更好的代码,所以在编码过程中要注意代码的简洁性、可读性、可维护性和可扩展性,这样才能写出更好的代码。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66580740d3423812e4dc1214