JavaScript 可选链（?.）与空值合并（??）操作符详解

JavaScript 中可选链（?.）与空值合并（??）操作符的应用解析

空值合并操作符（??）

该操作符属于逻辑运算符，其核心规则是：仅当左侧操作数的值为 null 或 undefined 时，才返回右侧操作数的值；否则返回左侧操作数。

const sum = null ?? 12
console.log(sum);
//输出12

const sum1 = 12 ?? 23
console.log(sum1);
//输出12

const sum2 = undefined ?? 12
console.log(sum2);
//输出12

可选链操作符（?.）

可选链操作符允许读取位于连接对象链深处属性的值，而无需在访问前明确验证链中的每个引用是否有效。其功能类似于传统的点（.）链式操作符，但关键区别在于：当引用为 null 或 undefined 时，不会抛出错误，而是自动短路并返回 undefined。若与函数调用结合使用，且目标函数不存在，表达式将返回 undefined 而非抛出异常。

const fa = {
      name: 'lming',
      son: {
        name: 'lqq'
      }
    };
const duc = fa.duc?.name;
console.log(duc);
//输出undefined

可选链操作符的使用场景

1. 获取对象深层嵌套属性

在尝试获取对象中嵌套较深的属性（例如 obj.first.second）时，若中间属性 first 为 null 或 undefined，直接访问会引发错误。传统做法是使用逻辑与（&&）运算符进行前置判断，例如：let num = obj.first && obj.first.second;。

let num = obj.first && obj.first.second;

使用可选链操作符（?.）可以简化上述逻辑，直接写作：let num = obj.first?.second;。

let num = obj.first?.second;

可选链与函数调用

当调用一个可能不存在的方法时，若使用可选链（?.），且该方法不存在，表达式会自动返回 undefined，而不会抛出异常。

let result = someInterface.customMethod?.();

注意：如果属性存在但并非函数，使用 ?. 调用时仍会抛出 TypeError 异常（例如：x.y is not a function）。

空值合并操作符（??）的使用

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”

短路计算特性

let a = null;
let x = 0;
let prop = a?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0

JavaScript 中 ?. 与 ?? 的具体用法总结

1. 可选链运算符（?.）

在 JavaScript 中，若某个值为 null 或 undefined，直接访问其后续属性会抛出 `Uncaught TypeError: Cannot read properties of undefined` 异常。

在实际项目开发中，常需处理“有值则读取，无值则不报错”的场景。

部分开发者可能使用三元运算符或 if 判断来处理，但在处理深层嵌套对象（如 obj.data.person.name）时，逻辑会变得非常复杂。

可选链操作符（?.）能优雅解决此问题，例如：obj?.name?.person?.name。

?. 支持无限链式调用。只要最终能访问到目标属性，即返回该属性值；若链中任意一环出现 null 或 undefined，表达式立即短路并返回 undefined。

2. 空值合并运算符（??）

?? 右侧为默认值，可以是常量或变量。

当 ?? 左侧的值不存在（即 null 或 undefined）时，返回 ?? 右侧的值（类似于三元运算符中冒号后的赋值逻辑）。

与 || 运算符的区别

|| 运算符在左侧值为“假值”（falsy）时返回右侧值，假值包括：0、''（空字符串）、undefined、null、false 等。

?? 运算符仅在左侧值为 null 或 undefined 时返回右侧值，0 和空字符串会被视为有效值保留。

总结：??是判断有没有值，|| 是判断真假。

本文介绍了 JavaScript 中 ?? 和 ?. 的用法，更多相关内容可搜索本站往期文章或继续浏览后续文章，感谢支持。