JS实战指南：无缝连接运算符'??'和'.'！

2022-11-30 20:04:54

让JavaScript更简洁、更安全：巧用‘??’和‘?.’运算符

在日常编码过程中，我们常常需要处理null 和undefined 值。这些值的存在可能会导致错误，降低代码的健壮性。为了解决这个问题，JavaScript引入了两个强大的运算符：‘??’和‘?.’，它们可以帮助我们优雅地处理这些特殊值。

‘??’运算符：非空值处理的利器

‘??’运算符，也称为空值合并 运算符，它允许我们对一个值进行非空值检查。如果该值不是null 或undefined ，则直接返回该值；否则，它将返回我们指定的默认值。其语法如下：

const nonNullValue = value ?? defaultValue;

其中：

value：要检查的值。
defaultValue：如果value为null 或undefined ，则返回此值。

‘??’运算符的优势：

使用‘??’运算符可以带来以下好处：

简化条件判断： 无需使用if-else语句，即可轻松处理null 和undefined 。
提升代码可读性： 代码更简洁、更易于理解和维护。
增强代码鲁棒性： 可以避免因null 或undefined 导致的错误。

实例：

// 检查变量'name'是否为非空值，否则返回默认值'Guest'
const name = 'John Doe';
const displayName = name ?? 'Guest';

console.log(displayName); // 输出: 'John Doe'

// 检查变量'age'是否为非空值，否则返回默认值20
const age = null;
const defaultAge = 20;
const displayedAge = age ?? defaultAge;

console.log(displayedAge); // 输出: 20

‘?.’运算符：安全导航，避免属性或方法调用错误

‘?.’运算符，也称为可选链 运算符，它允许我们安全地访问对象属性或调用对象方法，即使该属性或方法不存在也不会引发错误。其语法如下：

const result = object?.property;
const output = object?.method();

其中：

object：要访问的对象。
property：要访问的属性。
method：要调用的方法。

‘?.’运算符的优势：

使用‘?.’运算符可以带来以下好处：

安全访问对象属性和方法： 避免因访问不存在的属性或方法而导致的错误。
提升代码健壮性： 让代码在处理不存在的属性或方法时更加健壮。
增强代码可读性： 代码更清晰、更易于理解和维护。

实例：

// 检查变量'user'是否为非空值，否则返回null
const user = null;

// 安全访问user对象的'name'属性，避免因user为null而导致的错误
const userName = user?.name;

console.log(userName); // 输出: null

// 安全调用user对象的'getName()'方法，避免因user为null而导致的错误
const userAge = user?.getName();

console.log(userAge); // 输出: undefined