JavaScript可选链操作符（?.）使用指南

在JavaScript开发中，我们经常会遇到访问对象深层属性或调用可能不存在的方法的场景，传统写法需要先判断中间属性是否存在，否则很容易出现运行时错误。可选链操作符（?.）就是为了解决这个问题而诞生的语法特性，它可以让这类判断逻辑更简洁，减少冗余代码。

什么是可选链操作符

可选链操作符（?.）是ES2020引入的新语法，它允许我们在访问对象的属性或调用方法时，如果前面的引用是null或者undefined，就直接返回undefined，而不会抛出错误。这个操作符可以简化多层属性访问、方法调用、数组元素访问等场景的判断逻辑。

基本使用场景

访问对象深层属性

传统访问对象深层属性时，如果中间某一层不存在，就会报错。比如我们要获取用户地址里的城市信息，用户对象可能没有address属性，或者address里没有city属性，传统写法需要逐层判断：

// 传统写法，需要逐层判断避免报错
const user = {
  name: '张三',
  // address: { city: '北京' } // 假设address可能不存在
};

let city1;
if (user && user.address && user.address.city) {
  city1 = user.address.city;
} else {
  city1 = undefined;
}
console.log(city1); // 输出 undefined，不会报错

使用可选链操作符后，可以直接用user?.address?.city的方式访问，只要任意一层是null或undefined，就直接返回undefined：

// 使用可选链操作符的写法
const user = {
  name: '张三',
  // address: { city: '北京' }
};

const city2 = user?.address?.city;
console.log(city2); // 输出 undefined，不会报错

// 如果address存在，正常返回对应值
const user2 = {
  name: '李四',
  address: { city: '上海' }
};
const city3 = user2?.address?.city;
console.log(city3); // 输出 上海

调用可能不存在的方法

如果一个对象上的方法可能不存在，直接调用会报错，使用可选链可以避免这个问题：

const obj = {
  // sayHi: function() { return '你好'; } // 假设sayHi方法可能不存在
};

// 传统写法需要先判断方法是否存在
let result1;
if (obj.sayHi && typeof obj.sayHi === 'function') {
  result1 = obj.sayHi();
} else {
  result1 = undefined;
}

// 使用可选链调用方法
const result2 = obj?.sayHi?.();
console.log(result2); // 输出 undefined，不会报错

// 方法存在时正常调用
const obj2 = {
  sayHi: function() { return '你好'; }
};
const result3 = obj2?.sayHi?.();
console.log(result3); // 输出 你好

访问数组元素

可选链也支持访问数组的元素，当数组本身可能是null或undefined时，使用可选链可以避免报错：

const arr = null;
// 传统写法访问数组元素需要先判断数组是否存在
let first1;
if (arr && arr.length > 0) {
  first1 = arr[0];
} else {
  first1 = undefined;
}

// 使用可选链访问数组元素
const first2 = arr?.[0];
console.log(first2); // 输出 undefined，不会报错

// 数组存在时正常访问
const arr2 = [10, 20, 30];
const first3 = arr2?.[0];
console.log(first3); // 输出 10

注意事项

• 可选链操作符只会检查null和undefined，对于其他假值（比如空字符串、0、false）不会生效，还是会正常访问后续属性。比如const obj = { a: '' };，obj?.a?.length会返回0，因为空字符串的length是0，不是null/undefined。
• 可选链不能用于赋值操作的左侧，比如obj?.address?.city = '广州'这种写法会直接抛出语法错误，因为可选链返回的是值，不是可写的引用。
• 可选链可以和空值合并操作符（??）配合使用，比如const city = user?.address?.city ?? '未知城市'，当可选链返回undefined时，使用默认值，让逻辑更完整。

// 可选链和空值合并操作符配合使用
const user = {
  name: '王五'
};
const city = user?.address?.city ?? '未知城市';
console.log(city); // 输出 未知城市

const user2 = {
  name: '赵六',
  address: { city: '深圳' }
};
const city2 = user2?.address?.city ?? '未知城市';
console.log(city2); // 输出 深圳

适用环境说明

可选链操作符是ES2020的特性，现代浏览器（Chrome 80+、Firefox 74+、Edge 80+等）和Node.js 14+都原生支持，如果需要兼容更老的环境，可以使用Babel等工具进行转译，将可选链语法转换为兼容的旧语法。

JavaScript可选链?.操作符空值合并ES2020特性前端开发技巧 本作品最后修改时间：2026-05-22 14:07:37