JavaScript可选链和空值合并运算符怎么用？有什么使用场景和注意事项

JavaScript可选链和空值合并运算符是ES2020规范中新增的两个实用性极强的语法特性，主要用来解决对象深层属性访问时的报错问题和null、undefined值的默认值处理问题，能够减少大量冗余的非空判断代码，让逻辑表达更简洁清晰。

可选链运算符基本语法

可选链运算符的符号是?.，它的作用是当访问对象的属性时，如果对象本身为null或者undefined，不会抛出错误，而是直接返回undefined，避免程序中断。

基本使用方式有三种：

• 对象属性访问：obj?.prop，如果obj是null或undefined，返回undefined，否则返回obj.prop
• 对象方法调用：obj?.method()，如果obj是null或undefined，不会执行方法，直接返回undefined
• 数组元素访问：arr?.[index]，如果arr是null或undefined，返回undefined，否则返回对应下标的元素

下面是基础的使用示例：

// 基础对象访问示例
const user = {
  name: '张三',
  address: {
    city: '北京'
  }
};

// 传统写法需要判断address是否存在
const city1 = user.address && user.address.city;
console.log(city1); // 北京

// 可选链写法
const city2 = user?.address?.city;
console.log(city2); // 北京

// 访问不存在的属性
const street = user?.address?.street;
console.log(street); // undefined

// 方法调用示例
const obj = {
  sayHi: function() {
    return '你好';
  }
};
console.log(obj?.sayHi?.()); // 你好
console.log(null?.sayHi?.()); // undefined

空值合并运算符基本语法

空值合并运算符的符号是??，它的作用是当左侧的值为null或者undefined时，返回右侧的默认值，否则返回左侧的值。需要注意它和逻辑或运算符||的区别，||会在左侧值为假值（比如0、空字符串、false）时返回右侧值，而??只在左侧为null或undefined时返回右侧值。

基础使用示例：

// 空值合并运算符示例
const a = null;
const b = undefined;
const c = 0;
const d = '';
const e = false;

console.log(a ?? '默认值'); // 默认值
console.log(b ?? '默认值'); // 默认值
console.log(c ?? '默认值'); // 0，因为0不是null或undefined
console.log(d ?? '默认值'); // ''，空字符串不是null或undefined
console.log(e ?? '默认值'); // false，false不是null或undefined

// 对比逻辑或运算符
console.log(c || '默认值'); // 默认值，因为0是假值
console.log(d || '默认值'); // 默认值，因为空字符串是假值

两者配合使用场景

可选链和空值合并运算符经常搭配使用，用来处理对象深层属性访问时的默认值设置，是非常常见的开发场景。

比如我们需要获取用户的配送地址的城市信息，如果用户没有地址信息或者地址里没有城市信息，就返回默认城市：

const userList = [
  {
    name: '用户1',
    address: {
      city: '上海'
    }
  },
  {
    name: '用户2'
  },
  {
    name: '用户3',
    address: {}
  }
];

userList.forEach(user => {
  const city = user?.address?.city ?? '未知城市';
  console.log(`${user.name}的城市是：${city}`);
});
// 输出结果：
// 用户1的城市是：上海
// 用户2的城市是：未知城市
// 用户3的城市是：未知城市

使用注意事项

虽然这两个特性很实用，但是使用时也有一些需要注意的点：

• 可选链不能用于赋值操作的左侧，比如obj?.name = '李四'是错误的语法，会直接抛出错误
• 可选链不能用来创建对象属性，比如obj?.newProp = 123不合法
• 空值合并运算符不能和逻辑与&&、逻辑或||直接混合使用，如果需要混合使用必须加括号明确优先级，比如(a || b) ?? c是合法的，a || b ?? c会报错
• 可选链和空值合并运算符都是ES2020的新特性，如果需要兼容较旧的浏览器环境，需要通过Babel等工具进行语法转译

下面是一个错误用法的示例：

// 错误示例1：可选链用于赋值左侧
const obj = {};
// obj?.name = 'test'; // 这行代码会报错，语法不允许

// 错误示例2：空值合并混合使用不加括号
const a = null;
const b = 1;
const c = 2;
// console.log(a || b ?? c); // 这行会报错，需要写成(a || b) ?? c

console.log((a || b) ?? c); // 1，正确写法

总结

可选链和空值合并运算符是JavaScript中非常实用的语法特性，能够大幅简化非空判断和默认值处理的代码逻辑，提升代码的可读性和开发效率。开发者需要明确两者的使用场景和区别，尤其是可选链不能用于赋值、空值合并和逻辑运算符混合使用要加括号这些注意点，在合适的场景下合理使用，能够避免很多不必要的错误，让代码更简洁健壮。

JavaScript可选链空值合并运算符ES2020修改时间：2026-06-08 21:03:28