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

一. 前语

在日常的编程工作中，咱们常常需求处理或许为空的目标或特点，以保证代码的强健性和可靠性。传统的空值查看办法不只繁琐，并且容易引发过错和反常。

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

假设咱们有一个person目标，其中包括name、age和address字段。咱们需求获取该人的国家信息。在传统的空值查看办法下，代码或许如下所示：

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

在上面这个示例中，咱们需求接连判别person、address和country是否存在，才干安全地获取国家信息。这种办法不只需求书写冗长的条件语句，还存在遗失某些判别的风险。

走运的是，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。

let person = {
  name: "John",
  age: 30,
};
let name = person?.name; // "John"
let city = person?.city; // undefined

2. 办法调用

运用可选链 ? 来调用person目标的sayHello办法。假如person存在，则调用该办法；不然，什么也不做。

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

3. 索引拜访

运用可选链 ? 来拜访数组arr的索引方位。假如arr存在且索引有用，则回来对应的值；不然，回来undefined。

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

4. 链式拜访

运用可选链 ? 来链式拜访person目标的address特点的city特点。假如person存在且address存在，则回来city特点的值；不然，回来undefined。

let person = {
  name: "John",
  address: {
    city: "New York",
  },
};
let city = person?.address?.city; // "New York"
let street = person?.address?.street; // undefined

经过以上示例，咱们了解了可选链 ? 的根本语法和运用办法。它为咱们处理或许为空的目标或特点提了一种简练、可读的办法，增强了代码的强健性和可靠性。

三. 可选链的注意事项

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

1. 接连运用

  • 可选链操作符 ?. 能够在链式拜访的恣意点位上进行空值查看，可是过于频频的运用或许会导致代码的可读性下降。

  • 应根据实践状况挑选在哪些点位上运用可选链操作符，以保持代码的简练性和可维护性。

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' 这样的语法。
const obj = {
  name: 'John',
  age: null
};
// 无法运用可选链操作符赋值特点
obj?.name = 'David';
console.log(obj.name); // 'John'

报错了，如下图所示：

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

3. 隐式转化问题

运用可选链操作符 ?. 进行特点或办法拜访时，存在隐式转化问题。

具体地说，假如目标为 null 或 undefined，那么可选链操作符会隐式将其转化为 undefined，导致无法区别特点或办法自身回来的 undefined 是因目标为 null 或 undefined，还是因为特点或办法自身便是 undefined。

这种隐式转化或许会导致一些潜在的问题和困惑。例如，假如目标自身为 null，而特点或办法链中某个点位回来的是 undefined，那么运用可选链操作符 ?. 拜访时，会将两种状况都转化 undefined。

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

const obj = null;
// 无法区别 obj 是 null 还 obj.name 自身便是 undefined
console.log(obj?.name); // undefined

在上面的示例中，obj 为 null，运用可选链操作符 ?. 拜访 name 特点时由于目标为 null，解释器会将其视为 undefined，因此成果会是 undefined。

要解决这个隐转化问题，你能够经过运用严格持平算符（===）来手动查看目标是否为 null 或 undefined。

下面是一个示例：

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，后续的函数调用不会产生。

const obj = {
  method: () => {
    console.log("Hello, World!");
  },
};
// 运用可选链操作符调用或许为 null 或 undefined 的函数
obj?.method?.(); // 输出: "Hello, World!"

2. 数组索引和可选链

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

const arr = [1, 2, 3];
// 运用可选链操作符拜访或许为 null 或 undefined 的数组索引
console.log(arr?.[0]); // 输出: 1
console.log(arr?.[3]); // 输出: undefined

数组索引接连运用可选链

运用选链操作符 ?. 接连拜访数组 arr 中的索引值，并进一步拜访了该索引的目标中的 name 特点。假如恣意一个索引方位的目标为null 或 undefined，那么整个表达式会回来 undefined。

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 的特点或办法，并在产生短路时回来自定义的回来值。以下是一个示例代码：

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！