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

一. 前语

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

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

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

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

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

走运的是,JavaScript 引入了可选链 ?. 这一语法特性,供给了一种简练、高雅的办法来处理或许为空的目标或特点。运用可选链 ?. 能够将上述代码简化为:

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

可选链 ?. 不只能够显著削减代码中的冗余判别,并且让咱们的代码愈加晰、易读。除了简化代码,可选链 ?. 还能供给更好的过错处理和容错能力。帮助咱们防止过错的产生,并提高了代码的强健性和可靠性。

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

二. 可选链的根本语法

1. 什么是可选链

JavaScript 可选链是一种操作符,用于安全地拜访或许为空或未定义的特点或办法。可选链的语法是一个问号 ? 后跟一个点 .,表明在特点或办法链中进行存在性查看。假如链式操作中的任何一个特点或办法不存在或为 nullundefined,那么表达式会当即短路,回来 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. 隐式转化问题

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

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

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

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

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

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

要解决这个隐转化问题,你能够经过运用严格持平算符(===)来手动查看目标是否为 nullundefined

下面是一个示例:

const obj = null;
// 运用严格持平运算符查看 obj 是否为 null
console.log(obj === null ? null : obj.name); // null

在上面的示例中,咱们运用严格持平运算符(===)将 objnull 进行比较,假如持平咱们显式地将成果设置为 null,不然继续拜访 name 特点。

需求注意的是,为了代码的可读性和简练性,运用可选链操作符 ?. 是更为常见和引荐的做法。只要在需求区别目标为 null,还是特点或办法为 undefined的时候,才需求手动进行判别和处理。

四. 特殊状况

当可选链操作符 ?. 与圆括号 () 和方括号 [] 结合运用时,能够处理更杂乱的状况。下面是一些特殊状况的示例代码分析:

1. 函数调用和可选链

运用可选链操作符 ?. 调用了 obj 目标中的 method 办法。假如 objmethod 中的任何一个为 nullundefined,那么整个表达式会短路并回来 undefined,后续的函数调用不会产生。

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

2. 数组索引和可选链

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

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

数组索引接连运用可选链

运用选链操作符 ?. 接连拜访数组 arr 中的索引值,并进一步拜访了该索引的目标中的 name 特点。假如恣意一个索引方位的目标为nullundefined,那么整个表达式会回来 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 中,可选链操作符 ?. 与自定义回来值能够结合运用。你能够运用可选链操作符 ?. 来处理或许为 nullundefined 的特点或办法,并在产生短路时回来自定义的回来值。以下是一个示例代码:

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"

经过这种办法,咱们能够灵敏地处理或许为 nullundefined 的特点,并运用自定义的回来值来替代未定义的值。这关于防止引发过错和供给默认值十分有用。

六. 总结

可选链运算符 ?. 是编程开发中一个十分有用且强壮的特性,它使咱们能够更好地处理那些或许为空或未定义的特点或办法。

在 JavaScript 开发中,处理目标的特点和办法时,咱们常常需求查看它们是否存在,以防止因为特点或办法不存在而导致的 TypeError 过错。可选链运算符的出现,为咱们供给了一种简练、安全且高雅的办法来处理这样的状况。

经过运用可选链运算符 ?.,咱们能够轻松地链式拜访目标的特点,而不用手动进行繁琐的存在性查看。这不只使咱们的代码愈加简练,一起还提高了代码的可读性和可维护性。它使开发人员能够专注于事务逻辑,而不用过多地关注每一个特点是否存在。

总的来说,可选链运算符 ?. 简化了代码中关于存在性查看的处理,削减了冗余代码的编写,提高了开发效率。经过合理运用可选链运算符,咱们能够编写愈加强健、可维护且易于理解的代码。

希望本篇文章能够对你对可选链运算符有一个全面的知道,并在实践项目中充分利用它的优势。 Happy coding!