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

什么是可选链(?.)

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

可选链的使用场景

访问对象属性：当不确定某个属性是否存在时，可以使用可选链安全地访问它。
调用方法：当不确定某个方法是否存在时，可以使用可选链安全地调用它。
访问数组元素：当不确定数组是否存在时，可以使用可选链安全地访问数组元素。
组合使用：可选链可以与其他操作符组合使用，比如 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'

多种使用场景分析

访问深层嵌套对象属性：在复杂的数据结构中，访问深层嵌套的属性时，可以避免大量的条件检查和潜在的错误。例如，在处理来自 API 的嵌套响应数据时，可选链特别有用。
调用可选方法：在面向对象编程中，当对象的方法可能不存在时，使用可选链可以避免调用未定义的方法导致的错误。
安全地处理数组和列表：在处理动态生成的数组时，使用可选链可以确保安全地访问数组元素，即使数组为空或未定义。
提供默认值：与 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); // 输出: undefinedconst 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); // 输出: 0const qux = '' ?? 'default';
console.log(qux); // 输出: ''