😲🤯你需要了解的 JavaScript 最出色的新功能：可选链式调用

可选链式调用对于所有 JavaScript 开发者来说都是一个颠覆性的改变。它的重要性不亚于粗箭头函数，或者“let”和“const”。让我们来探讨一下它解决了哪些问题，它是如何工作的，以及它将如何让你的生活更轻松。

问题

想象一下：
你正在编写一段从 API 加载数据的代码。你返回的对象是深度嵌套的，这意味着你需要遍历一长串的对象属性。

// API response object
const person = {
    details: {
        name: {
            firstName: "Michael",
            lastName: "Lampe",
        }
    },
    jobs: [
        "Senior Full Stack Web Developer",
        "Freelancer"
    ]
}
// Getting the firstName
const personFirstName = person.details.name.firstName;

现在保留这样的代码并不是一个好习惯。更好的解决方案可能是这样的：

// Checking if firstName exists
if( person &&
    person.details &&
    person.details.name ) {
        const personFirstName = person.details.name.firstName || 'stranger';
}

正如你在示例中看到的，即使是像获取某人的 firstName 这样简单的事情，也很难做到正确。
这就是为什么我们开发了类似的框架lodash来处理这类事情。

_.get(person, 'details.name.firstName', 'stranger');

“loadash” 确实提升了代码的可读性，但现在你在代码库中引入了一个很大的依赖项。你需要更新它，而且如果你在团队中工作，你还必须向团队传播它的知识和用法。所以这也不是理想的解决方案。

解决方案

可选链接可以解决所有这些问题（除了团队知识问题）。

它是如何工作的

可选链接引入了新的语法，一开始你可能会觉得很奇怪，但几分钟后你就会习惯它。

const personFirstName = person?.details?.name?.firstName;

好的，现在你可能脑子里有很多问号（双关语）。所以这里的新东西是?。你必须这样思考。如果?.属性开头有一个，就像你会问自己，person 是否存在？或者用更 JavaScript 的方式，它是否有person值null或undefined？如果是，那么我不会返回错误，而只是undefined。所以personFirstName将具有的值undefined。这个问题将针对details?和重复name?。如果这些值中的任何一个为“null”或undefined，那么personFirstName也将是undefined。这被称为Short-circuiting。一旦 JavaScript 找到一个null或，undefined它就会短路并停止深入。

默认值

我们还需要学习Nullish coalescing operator。好吧，这听起来很难学。但实际上并非如此。我们来看下面的例子：

const personFirstName = person?.details?.name?.firstName ?? 'stranger';

表示Nullish coalescing operator为??。它也非常容易阅读。如果左侧是 ，undefined则将personFirstName从 中获取右侧的值??。非常简单。

动态属性

有时你想访问一个动态值。它可能是一个数组值，或者只是一个对象的动态属性。

const jobNumber = 1;
const secondJob = person?.jobs?.[jobNumber] ?? 'none';

这里需要理解的重要一点是，它jobs?.[jobNumber]与相同jobs[jobNumber]，但不会引发错误；相反，它将返回“无”。

函数或方法调用

有时你会处理一些你不知道其是否具有方法的对象。这时我们可以使用?.()带有参数的语法 or ?.({ some: 'args'})。它会像你想象的那样工作。如果该对象上不存在此方法，它将返回undefined。

const currentJob = person?.jobs.getCurrentJob?.() ?? 'none';

如果没有getCurrentJob功能那么currentJob将会有none。

立即开始使用

目前还没有浏览器支持开箱即用——Babel 可以解决这个问题。babel.js如果你已经安装了 Babel，那么已经有一个插件可以很容易地集成。

babel-plugin-proposal-optional-chaining

结语

我认为这会让很多 JavaScript 代码更易于阅读，也更不容易出错。如果你感兴趣，也可以阅读这个提案。希望这篇文章能让你更聪明一些，并且现在就想把可选链式调用集成到你的工作流程中！

如果你能帮我做以下事情，那对我很有帮助。
去Twitch关注我！只要有几个人能这么做，这对我来说就意味着一切！❤❤❤😊

👋问好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube