拥抱可选链 (?.) ：打造简洁且健壮的 JavaScript 代码

一. 前言

在日常的编程工作中，我们经常需要处理可能为空的对象或属性，以确保代码的健壮性和可靠性。传统的空值检查方法不仅繁琐，而且容易引发错误和异常。

比如，下面这一个示例来看一下可选链的使用优势。

假设我们有一个person对象，其中包含name、age和address字段。我们需要获取该人的国家信息。在传统的空值检查方式下，代码可能如下所示：

javascript 复制代码

let person = {};
let country = "";
if (person && person.address && person.address.country) {
  country = person.address.person;
}
console.log(country);

在上面这个示例中，我们需要连续判断person、address和country是否存在，才能安全地获取国家信息。这种方式不仅需要书写冗长的条件语句，还存在遗漏某些判断的风险。

幸运的是，JavaScript 引入了可选链 ?. 这一语法特性，提供了一种简洁、优雅的方式来处理可能为空的对象或属性。使用可选链 ?. 可以将上述代码简化为：

javascript 复制代码

let country = person?.address?.country || "";
console.log(country);

可选链 ?. 不仅能够显著减少代码中的冗余判断，而且让我们的代码更加晰、易读。除了简化代码，可选链 ?. 还能提供更好的错误处理和容错能力。帮助我们避免错误的发生，并提高了代码的健壮性和可靠性。

本篇文章将深入分析 JavaScript 中的可选链 ?.，分析其语法、注意事项以及一些技巧。下面我们一起来看一下吧！

二. 可选链的基本语法

1. 什么是可选链

JavaScript 可选链是一种操作符，用于安全地访问可能为空或未定义的属性或方法。可选链的语法是一个问号 ? 后跟一个点 .，表示在属性或方法链中进行存在性检查。如果链式操作中的任何一个属性或方法不存在或为 null 或 undefined，那么表达式会立即短路，返回 undefined，而不会导致异常错误。

可选链的主要目的是简化代码中对于存在性检查的处理，避免大量的冗余代码。它使得我们能够以更简洁和优雅的方式操作对象的属性和方法，而不必手动进行深层的存在性检查。

使用可选链 ? 的基本语法如下：

对象访问 ：object?.property，表示如果object存在，则访问该对象的property属性。
方法调用 ：object?.method()，表示如果object存在，则调用该对象的method方法。
索引访问 ：array?.[index]，表示如果array存在，则访问该数组的index索引位置的值。
链式访问 ：object?.prop1?.prop2，表示如果object存在且prop1存在，则访问prop1属性的prop2属性。

2. 使用方式

以上面的基本语法为导向，下面是我总结的一些示例代码来说明可选链 ? 的使用方式：

1. 对象访问

使用可选链 ? 来访问person对象的name属性。如果person存在，则返回name属性的值；否则，返回undefined。

javascript 复制代码

let person = {
  name: "John",
  age: 30,
};

let name = person?.name; // "John"
let city = person?.city; // undefined

2. 方法调用

使用可选链 ? 来调用person对象的sayHello方法。如果person存在，则调用该方法；否则，什么也不做。

javascript 复制代码

let person = {
  name: "John",
  sayHello: function () {
    console.log("Hello!");
  },
};

person?.sayHello(); // "Hello!"

let nobody = null;
nobody?.sayHello(); // undefined

3. 索引访问

使用可选链 ? 来访问数组arr的索引位置。如果arr存在且索引有效，则返回对应的值；否则，返回undefined。

javascript 复制代码

let arr = [1, 2, 3];

let value1 = arr?.[1]; // 2
let value2 = arr?.[3]; // undefined

4. 链式访问

使用可选链 ? 来链式访问person对象的address属性的city属性。如果person存在且address存在，则返回city属性的值；否则，返回undefined。

javascript 复制代码

let person = {
  name: "John",
  address: {
    city: "New York",
  },
};

let city = person?.address?.city; // "New York"
let street = person?.address?.street; // undefined

通过以上示例，我们了解了可选链 ? 的基本语法和使用方式。它为我们处理可能为空的对象或属性提了一种简洁、可读的方式，增强了代码的健壮性和可靠性。

三. 可选链的注意事项

使用 JavaScript 的可选链操作符 ?. 时，有一些注意事项，下面是我总结的这些注意事项的详细分析：

1. 连续使用

可选链操作符 ?. 可以在链式访问的任意点位上进行空值检查，但是过于频繁的使用可能会导致代码的可读性下降。
应根据实际情况选择在哪些点位上使用可选链操作符，以保持代码的简洁性和可维护性。

javascript 复制代码

const obj = {
  name: "John",
  address: {
    city: "New York",
    apartment: {
      number: 123,
    },
  },
};

// 例子1: 连续使用可选链操作符
console.log(obj?.address?.apartment?.number); // 123

// 例子2: 仅在需要的位置使用可选链操作符
console.log(obj.address?.apartment?.number); // 123

2. 仅适用于访问操作

可选链操作符 ?. 仅用于访问对象的属性或调用对象的方法，而无法用于赋值操作、删除属性等其他操作。例如，不能使用 obj?.name = 'John' 这样的语法。

javascript 复制代码

const obj = {
  name: 'John',
  age: null
};

// 无法使用可选链操作符赋值属性
obj?.name = 'David';

console.log(obj.name); // 'John'

报错了，如下图所示：

3. 隐式转换问题

使用可选链操作符 ?. 进行属性或方法访问时，存在隐式转换问题。

具体地说，如果对象为 null 或 undefined，那么可选链操作符会隐式将其转换为 undefined，导致无法区分属性或方法本身返回的 undefined 是因对象为 null 或 undefined，还是因为属性或方法本身就是 undefined。

这种隐式转换可能会导致一些潜在的问题和困惑。例如，如果对象本身为 null，而属性或方法链中某个点位返回的是 undefined，那么使用可选链操作符 ?. 访问时，会将两种情况都转换 undefined。

下面以一个示例来说明选链操作符隐式转换问题：

javascript 复制代码

const obj = null;

// 无法区分 obj 是 null 还 obj.name 本身就是 undefined
console.log(obj?.name); // undefined

在上面的示例中，obj 为 null，使用可选链操作符 ?. 访问 name 属性时由于对象为 null，解释器会将其视为 undefined，因此结果会是 undefined。

要解决这个隐转换问题，你可以通过使用严格相等算符（===）来手动检查对象是否为 null 或 undefined。

下面是一个示例：

javascript 复制代码

const obj = null;

// 使用严格相等运算符检查 obj 是否为 null
console.log(obj === null ? null : obj.name); // null

在上面的示例中，我们使用严格相等运算符（===）将 obj 与 null 进行比较，如果相等我们显式地将结果设置为 null，否则继续访问 name 属性。

需要注意的是，为了代码的可读性和简洁性，使用可选链操作符 ?. 是更为常见和推荐的做法。只有在需要区分对象为 null，还是属性或方法为 undefined的时候，才需要手动进行判断和处理。

四. 特殊情况

当可选链操作符 ?. 与圆括号 () 和方括号 [] 结合使用时，可以处理更复杂的情况。下面是一些特殊情况的示例代码分析：

1. 函数调用和可选链

使用可选链操作符 ?. 调用了 obj 对象中的 method 方法。如果 obj 或 method 中的任何一个为 null 或 undefined，那么整个表达式会短路并返回 undefined，后续的函数调用不会发生。

javascript 复制代码

const obj = {
  method: () => {
    console.log("Hello, World!");
  },
};

// 使用可选链操作符调用可能为 null 或 undefined 的函数
obj?.method?.(); // 输出: "Hello, World!"

2. 数组索引和可选链

使用可选链操作符 ?. 访问了数组 arr 中的索引值。如果 arr 为 null 或 undefined，那么整个表达式会返回 undefined。

javascript 复制代码

const arr = [1, 2, 3];

// 使用可选链操作符访问可能为 null 或 undefined 的数组索引
console.log(arr?.[0]); // 输出: 1
console.log(arr?.[3]); // 输出: undefined

数组索引连续使用可选链

使用选链操作符 ?. 连续访问数组 arr 中的索引值，并进一步访问了该索引的对象中的 name 属性。如果任意一个索引位置的对象为null 或 undefined，那么整个表达式会返回 undefined。

javascript 复制代码

const arr = [
  { name: "Alice" },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 30 },
];

//可选链操作符的续数组索引
console.log(arr?.[1]?.name); // 输出: "Bob"
console.log(arr?.[3]?.name); // 输出: undefined

3. 总结

通过以上示例，我们可以看到可选链操作符 ?. 与括号 () 和方括号 [] 的结合使用，可以更灵活处理复杂的函数调用和数组索引操作，避免因为 null undefined 值而引发错误。

五. 使用技巧

在 JavaScript 中，可选链操作符 ?. 与自定义返回值可以结合使用。你可以使用可选链操作符 ?. 来处理可能为 null 或 undefined 的属性或方法，并在发生短路时返回自定义的返回值。以下是一个示例代码：

javascript 复制代码

const obj = {
  name: "Alice",
  age: 25,
};

// 使用可选链操作符获取可能为 null 或 undefined 的属性，并指定自定义返回值
const name = obj?.name ?? "Unknown";
const address = obj?.address ?? "Unknown";

console.log(name); // 输出: "Alice"
console.log(address); // 输出: "Unknown"

在上面的示例中，我们使用可选链操作符 ?. 来获取 obj 对象的属性。如果 obj 对象不存在或属性不存在，那么整个表达式会短路并返回 undefined。通过使用空值合并操作符 ??，我们可以指定自定义的返回值，在发生短路时返回该值。

在示例代码中，name 属性存在，因此 name 变量的值为 "Alice"。而 address 属性不存在，所以 address 变量的值为自定义的返回值 "Unknown"。

通过这种方式，我们可以灵活地处理可能为 null 或 undefined 的属性，并使用自定义的返回值来代替未定义的值。这对于避免引发错误和提供默认值非常有用。

六. 总结

可选链运算符 ?. 是编程开发中一个非常实用且强大的特性，它使我们能够更好地处理那些可能为空或未定义的属性或方法。

在 JavaScript 开发中，处理对象的属性和方法时，我们经常需要检查它们是否存在，以避免因为属性或方法不存在而导致的 TypeError 错误。可选链运算符的出现，为我们提供了一种简洁、安全且优雅的方式来处理这样的情况。

通过使用可选链运算符 ?.，我们可以轻松地链式访问对象的属性，而不必手动进行繁琐的存在性检查。这不仅使我们的代码更加简洁，同时还提高了代码的可读性和可维护性。它使开发人员能够专注于业务逻辑，而不必过多地关注每一个属性是否存在。

总的来说，可选链运算符 ?. 简化了代码中对于存在性检查的处理，减少了冗余代码的编写，提高了开发效率。通过合理使用可选链运算符，我们可以编写更加健壮、可维护且易于理解的代码。

希望本篇文章能够对你对可选链运算符有一个全面的认识，并在实际项目中充分利用它的优势。 Happy coding！