JavaScript可选链操作符是什么？它有哪些用法和注意事项

JavaScript可选链操作符是ES2020规范中新增的语法特性，核心作用是让开发者在访问对象深层属性时，不需要手动逐层判断中间属性是否存在，从而避免抛出无法读取未定义或null属性的错误，大幅简化代码的判断逻辑。

可选链操作符的基本语法

可选链操作符的标识是?.，它可以在访问对象属性、调用方法、访问数组元素时使用，当左侧的操作数为null或者undefined时，表达式会直接返回undefined，而不会继续执行后续的访问逻辑。

访问对象属性

这是可选链最常用的场景，比如我们需要获取一个用户对象的地址信息中的城市名称，传统写法需要先判断每一层是否存在：

// 传统写法
const user = {
  name: '张三',
  address: {
    city: '北京'
  }
};
let city;
if (user && user.address && user.address.city) {
  city = user.address.city;
} else {
  city = undefined;
}

// 使用可选链操作符的写法
const city2 = user?.address?.city;
console.log(city2); // 输出：北京

// 如果中间属性不存在的情况
const user2 = { name: '李四' };
const city3 = user2?.address?.city;
console.log(city3); // 输出：undefined

调用对象方法

当我们需要调用一个可能不存在的方法时，也可以使用可选链操作符，避免因为方法不存在而抛出错误：

const obj = {
  sayHi: function() {
    return '你好';
  }
};

// 调用存在的方法
const res1 = obj.sayHi?.();
console.log(res1); // 输出：你好

// 调用不存在的方法
const res2 = obj.sayHello?.();
console.log(res2); // 输出：undefined

访问数组元素

可选链操作符也可以用来访问数组的元素，当数组本身为null或者undefined时，不会抛出错误：

const arr = [1, 2, 3];
const firstElement = arr?.[0];
console.log(firstElement); // 输出：1

const emptyArr = null;
const element = emptyArr?.[0];
console.log(element); // 输出：undefined

可选链操作符的注意事项

• 可选链操作符只会检查左侧的值是否为null或者undefined，对于其他假值比如0、''、false不会生效，依然会继续执行后续的访问逻辑。
• 可选链操作符不能用于赋值语句的左侧，比如user?.address?.city = '上海'这种写法是不合法的，会直接抛出语法错误。
• 可选链操作符可以和空值合并操作符??配合使用，给访问不到的属性设置默认值，比如const city = user?.address?.city ?? '未知城市'，当城市不存在时就会返回默认值。

适用场景总结

可选链操作符非常适合在以下场景使用：需要访问接口返回的深层嵌套对象属性时，处理可能不存在的DOM元素属性时，调用第三方库中可能不存在的方法时。它可以减少大量重复的空值判断代码，让代码更简洁易读，但也要注意不要过度使用，避免掩盖真正的代码逻辑错误。

JavaScript可选链操作符语法特性空值处理修改时间：2026-06-19 21:39:13