在 ECMAScript 2020 (ES11) 中,引入了一个新的「可空链操作符」(Optional Chaining Operator)(?.)的语法。它可以让我们简化一些常见的操作,同时更好地处理那些可能为 null 或 undefined 的变量和属性。
什么是可空链操作符?
可空链操作符是一个简化后的连续判断语句。它可以用于访问一个可能为 null 或 undefined 的变量或属性。回想起在以前我们使用的语法:
if (obj && obj.first && obj.first.second) { // Do something with obj.first.second. }
使用可空链操作符可以简化为:
if (obj?.first?.second) { // Do something with obj.first.second. }
这样就能清晰地表达出当 obj 及其属性的值为 null 或 undefined 时,不进行第二个和第三个条件的判断并直接退出判断流程,无需将变量或属性的值单独赋值或对其进行 if 判断。
如何使用可空链操作符
1. 访问对象的属性值
使用可空链操作符可以更加方便地访问对象中的属性。示例如下:
const person = { name: 'Tom' }; const age = person?.age ?? 18; console.log(age); // 18
上述代码中,当 person 对象中没有 age 属性时,可空链操作符会直接返回 undefined。在这种情况下,使用 null 合并操作符 (??) 来指定一个默认值。
2. 访问数组元素的值
对于数组,使用可空链操作符可以访问数组元素的值。示例如下:
const arr = [1, 2, 3]; const value = arr[3]?.value ?? 0; console.log(value); // 0
上述代码中,当访问数组中不存在的三号元素并由 ?? 指定赋默认值 0。增强了代码的鲁棒性。
3. 函数调用
使用可空链操作符可以更加方便地使用函数并避免进行显式的空值检查。示例如下:
const obj = { foo: function() { console.log('Hello, World!'); } }; obj?.foo?.(); // Hello, World!
可以看到,当 obj 或 obj.foo 为 null 或 undefined,可空链操作符()后的方法直接退出而不会抛出 TypeError。
总结
可空链操作符是 ECMAScript 2020 (ES11) 中一个极其实用的新特性。它可以帮助我们减少代码量并更加清晰地处理可能会为空的变量及其属性。同时,它的应用也更加方便。在未来的 JavaScript 编程中,可空链操作符必将更广泛的应用!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b6e3beadd4f0e0fff81710