返回

ES2020 守护神：可选链 "?."让数据访问无后顾之忧

前端

可选链（?.）是ES2020引入的新特性，旨在解决长期困扰JavaScript开发人员的属性访问问题。在以往，如果我们要访问一个嵌套对象的属性，必须确保中间的所有属性都存在，否则就会抛出错误。可选链的出现，让我们可以安全地访问嵌套对象的属性，即使中间的属性不存在，也不会出现错误，让数据访问更加安全和无后顾之忧。

那么，可选链究竟是如何工作的呢？我们先来看一个例子：

const user = {
  name: "John Doe",
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

如果我们要访问用户的地址，可以使用以下代码：

console.log(user.address.street); // "123 Main Street"

但是，如果用户的地址属性不存在，比如：

const user = {
  name: "John Doe"
};

那么，上述代码就会抛出错误：

TypeError: Cannot read property 'street' of undefined

这可能会导致我们的程序崩溃。为了避免这个问题，我们可以使用可选链来访问用户的地址：

console.log(user?.address?.street); // undefined

如你所见，可选链使我们的代码更加安全。即使用户的地址属性不存在，也不会抛出错误，而是返回undefined。这让我们可以安全地访问嵌套对象的属性，而不用担心错误。

可选链不仅可以用来访问对象的属性，还可以用来调用对象的方法。例如：

const user = {
  name: "John Doe",
  greet: function() {
    console.log("Hello, world!");
  }
};

如果我们要调用用户的greet方法，可以使用以下代码：

user.greet(); // "Hello, world!"

但是，如果用户的greet方法不存在，比如：

const user = {
  name: "John Doe"
};

那么，上述代码就会抛出错误：

TypeError: user.greet is not a function

为了避免这个问题，我们可以使用可选链来调用用户的greet方法：

user?.greet(); // undefined

和之前一样，可选链使我们的代码更加安全。即使用户的greet方法不存在，也不会抛出错误，而是返回undefined。

可选链的出现，为JavaScript开发人员带来了许多好处。它使我们能够更加安全、无错误地访问嵌套对象的属性和调用对象的方法，提升了代码的可读性和可维护性。如果你还没有使用可选链，强烈建议你尽快学习并将其应用到你的代码中。