可选链接

对于JavaScript语言在过去几年中进行的所有改进，例如散布运算符，默认参数值和箭头函数，我仍然希望看到一些实现的功能。一种这样的功能是可选链接。可选的链接允许开发人员在不触发错误的情况下引用可能存在或不存在的对象属性。

以下面的例子作为举例说明：

const person = {   name: "David",   skills: {     _javascript: {       frameworks: ["MooTools", "React"],     }   },   save: () => { } }; // Property that *doesn't* exist (css) person.skills.css.frameworks; // Uncaught TypeError: Cannot read property 'frameworks' of undefined

尝试获取未定义的父级的属性会导致导致TypeError您的应用程序变砖。在这种情况下，我们要检查以确保该css属性存在：

if(   person.skills &&    person.skills.css &&    person.skills.css.frameworks) {     // ... }

我编写了一个名为Objectifier的get and set实用程序，以使引用嵌套对象的属性变得更加容易，但是有了Optional Chaining建议，我们现在有了一种本机方式。

可选链接的一个简单示例是：

const skills = person?.skills;

您可以沿着嵌套对象的行继续执行模式：

const frameworks = person?.skills?.javascript?.frameworks;

如果某个属性不存在，则链接将停止并undefined返回。可选链接还支持括号语法：

const language = "javascript"; const frameworks = person?.skills?.[language]?.frameworks;

您也可以不加任何惩罚地调用一个函数：

// Calls save if exists, otherwise nothing const frameworks = person?.save();

您甚至可以在顶级对象上使用链接语法：

addEventListener?.("click", e => { }); methodDoesntExist?.(); // undefined

您甚至可以通过可选的链接使用解构：

const { frameworks, doesntExist } = person.skills?.javascript;

如果要在未定义值的情况下设置后备值，则可以使用??：

let frameworkz = person?.skills?.["javascript"]?.frameworkz ?? "react.js";

在撰写本文时，可选链接尚未出现在任何浏览器中，但是您可以在Babel在线编译器上试用可选链接。

可选链接似乎有些争议。有人认为开发人员应该知道并验证他们正在使用的对象。另一方面，连续的嵌套属性检查是一场噩梦。我期待JavaScript中的可选链接。你怎么认为？