JS中.?和??语法

JS中.?和??语法

在JavaScript中，?.和??是ES11（也被称为ES2020）中引入的两种新的语法。它们的作用是为了简化代码，更方便地处理可能出现的null或undefined值。

?.语法

?.语法是可选链操作符（Optional Chaining Operator）的简写形式。在使用传统的方式访问对象属性或方法时，如果某个属性或方法可能为null或undefined，我们需要手动添加判断语句，以避免出现TypeError错误。而?.语法可以在访问属性或调用方法的同时进行判断，如果对象为null或undefined，则返回undefined，而不会抛出错误。

下面是一个示例，展示了使用?.语法和传统方式的对比：

const obj = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'New York',
    street: '123 Main St'
  }
};

// 传统方式
const city1 = obj.address ? obj.address.city : undefined;
console.log(city1); // 输出：New York

// 使用?.语法
const city2 = obj.address?.city;
console.log(city2); // 输出：New York

// 访问不存在的属性
const country = obj.address?.country;
console.log(country); // 输出：undefined

// 访问不存在的对象
const street = obj.location?.street;
console.log(street); // 输出：undefined

可以看到，通过?.语法可以在不添加任何额外的判断语句的情况下，安全地访问嵌套对象的属性，避免了代码冗余和错误的发生。

??语法

??是空值合并操作符（Nullish Coalescing Operator），用于判断一个值是否为null或undefined，如果是，则返回默认值。不同于传统的逻辑或（||）操作符，在判断值为假时也会返回默认值，??只在值为null或undefined时返回默认值。

下面是一个示例，展示了使用??语法和传统方式的对比：

const value1 = undefined;
const value2 = null;
const value3 = 0;

// 传统方式
const result1 = value1 || 'default';
console.log(result1); // 输出：default

const result2 = value2 || 'default';
console.log(result2); // 输出：default

const result3 = value3 || 'default';
console.log(result3); // 输出：default

// 使用??语法
const result4 = value1 ?? 'default';
console.log(result4); // 输出：default

const result5 = value2 ?? 'default';
console.log(result5); // 输出：default

const result6 = value3 ?? 'default';
console.log(result6); // 输出：0

可以看到，在使用??语法时，只有value1和value2的值为null或undefined时才返回默认值，而value3的值为0，不符合判断条件，所以返回其原始值。这种行为对于需要明确区分值为null、undefined或其他假值的情况是非常有用的。

通过使用?.和??语法，可以更加简洁和安全地处理可能出现的null或undefined值，在代码编写和阅读时更加便利和直观。在实际的项目开发中，建议充分利用这两种新的语法特性，以提高代码质量和可维护性。