空值合并运算符和链运算符

好的，我们来聊聊前端开发中的两个实用技巧：空值合并运算符（Nullish Coalescing Operator）和链运算符（Chaining Operator）。

空值合并运算符（??）

空值合并运算符 ?? 是一个逻辑运算符，用于在左侧操作数为 null 或 undefined 时返回右侧操作数，否则返回左侧操作数。这个运算符在处理可能未定义的变量时非常有用，可以避免使用冗长的逻辑表达式。

// 假设我们有一个对象 person，它可能没有 lastName 属性
let person = {
    firstName: '张三',
    // lastName: undefined
};

// 使用空值合并运算符来提供一个默认值
let lastName = person.lastName ?? '未知';

console.log(lastName); // 输出 '未知'，因为 person.lastName 是 undefined

在这个例子中，如果 person.lastName 存在且不是 null 或 undefined，lastName 就会被赋值为 person.lastName 的值。如果 person.lastName 是 null 或 undefined，lastName 就会被赋值为 '未知'。

链运算符（?.）

链运算符 ?. 允许你安全地访问深层嵌套的对象属性，即使中间某些属性可能不存在。如果链中的某个属性是 null 或 undefined，表达式会立即停止计算，并且整个表达式的结果为 undefined，而不是抛出错误。

const person = {
    contact: {
        email: 'zhangsan@example.com'
    }
};

// 使用链运算符安全访问 person.contact.email
const email = person.contact?.email;

console.log(email); // 输出 'zhangsan@example.com'

const phone = person.contact?.phone; // phone 将会是 undefined，而不是抛出错误

const nonExistent = person?.nonExistent?.property;
console.log(nonExistent); // 输出 undefined

在这个例子中，即使 person.contact 存在，但如果尝试访问 person.contact.phone，由于 phone 属性不存在，使用链运算符会安全地返回 undefined，而不是抛出错误。同样，如果尝试访问 person.nonExistent.property，由于 nonExistent 属性不存在，链运算符也会安全地返回 undefined。

这两个运算符在现代JavaScript开发中非常有用，可以简化代码并提高代码的健壮性。