可选链操作符(?.)、空值合并操作符(??)

什么是可选链(?.)

可选链（Optional Chaining，?.）是 JavaScript 提供的一种语法，用于在访问嵌套对象属性时，防止因访问不存在的属性而导致的运行时错误。可选链操作符允许您安全地访问深层次的属性，即使其中某些属性不存在，也不会导致错误，而是返回 undefined。

可选链的使用场景

1. 访问对象属性：当不确定某个属性是否存在时，可以使用可选链安全地访问它。
2. 调用方法：当不确定某个方法是否存在时，可以使用可选链安全地调用它。
3. 访问数组元素：当不确定数组是否存在时，可以使用可选链安全地访问数组元素。
4. 组合使用：可选链可以与其他操作符组合使用，比如 nullish 合并操作符 ??，以提供默认值。

示例代码和分析

访问对象属性
假设我们有一个用户对象：

const user = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'Wonderland'
  }
};

// 使用可选链访问嵌套属性
const street = user?.address?.street;
console.log(street); // 输出: '123 Main St'

// 当 address 属性不存在时，不会报错，而是返回 undefined
const zipCode = user?.address?.zipCode;
console.log(zipCode); // 输出: undefined

// 当 user 对象不存在时，不会报错，而是返回 undefined
const city = undefinedUser?.address?.city;
console.log(city); // 输出: undefined

调用方法
假设我们有一个用户对象，包含一个可选的 greet 方法：

const user = {
  name: 'Alice',
  greet() {
    console.log('Hello, ' + this.name);
  }
};

// 安全地调用 greet 方法
user.greet?.(); // 输出: 'Hello, Alice'

// 当 greet 方法不存在时，不会报错，而是返回 undefined
const anotherUser = { name: 'Bob' };
anotherUser.greet?.(); // 不输出内容

访问数组元素
假设我们有一个可能为空的数组：

const data = {
  items: ['apple', 'banana', 'cherry']
};

// 安全地访问数组元素
const firstItem = data.items?.[0];
console.log(firstItem); // 输出: 'apple'

// 当 items 数组不存在时，不会报错，而是返回 undefined
const secondItem = data.nonExistentArray?.[1];
console.log(secondItem); // 输出: undefined

组合使用
可选链可以与 nullish 合并操作符 ?? 结合使用，以提供默认值：

const user = {
  name: 'Alice',
  preferences: {
    theme: 'dark'
  }
};

// 使用可选链和 nullish 合并操作符提供默认值
const theme = user.preferences?.theme ?? 'light';
console.log(theme); // 输出: 'dark'

// 当 preferences 或 theme 不存在时，提供默认值
const anotherUser = { name: 'Bob' };
const anotherTheme = anotherUser.preferences?.theme ?? 'light';
console.log(anotherTheme); // 输出: 'light'

多种使用场景分析

1. 访问深层嵌套对象属性：在复杂的数据结构中，访问深层嵌套的属性时，可以避免大量的条件检查和潜在的错误。例如，在处理来自 API 的嵌套响应数据时，可选链特别有用。
2. 调用可选方法：在面向对象编程中，当对象的方法可能不存在时，使用可选链可以避免调用未定义的方法导致的错误。
3. 安全地处理数组和列表：在处理动态生成的数组时，使用可选链可以确保安全地访问数组元素，即使数组为空或未定义。
4. 提供默认值：与 nullish 合并操作符结合使用，可以为可能未定义的值提供默认值，简化代码逻辑。

结论

可选链操作符 ?. 提供了一种简洁、安全的方式来访问对象、方法和数组的属性，避免运行时错误。通过理解和应用可选链，您可以编写更健壮、更可维护的代码。

可选链（?.）和空值合并(??)是es6 还是 es8的？

可选链操作符 (?.) 和空值合并操作符 (??) 都不是 ES6（ECMAScript 2015）或 ES8（ECMAScript 2017）的一部分。它们是 ECMAScript 2020（也称为 ES11）中的新增特性。

可选链操作符（Optional Chaining，?.）

可选链操作符允许开发者在访问对象的属性或调用方法时，安全地处理 null 或 undefined。这个操作符于 ECMAScript 2020 中引入。

空值合并操作符（Nullish Coalescing，??）

空值合并操作符用于处理 null 或 undefined，为这些情况提供一个默认值。它也于 ECMAScript 2020 中引入。

示例

可选链操作符示例

const user = {
  name: 'Alice',
  address: {
    street: '123 Main St'
  }
};

const street = user?.address?.street;
console.log(street); // 输出: '123 Main St'

const zipCode = user?.address?.zipCode;
console.log(zipCode); // 输出: undefined

const city = undefinedUser?.address?.city;
console.log(city); // 输出: undefined

空值合并操作符示例

const foo = null ?? 'default';
console.log(foo); // 输出: 'default'

const bar = undefined ?? 'default';
console.log(bar); // 输出: 'default'

const baz = 0 ?? 'default';
console.log(baz); // 输出: 0

const qux = '' ?? 'default';
console.log(qux); // 输出: ''

结论

可选链操作符 (?.) 和空值合并操作符 (??) 都是 ECMAScript 2020 中引入的特性，不属于 ES6 或 ES8。通过这些特性，JavaScript 提供了更简洁和安全的方式来处理可能为 null 或 undefined 的值，从而提升了代码的健壮性和可读性。