设置超链接不可选泽红_可选链接

我会带着你远行 2023-02-21 14:28 31阅读 0赞

设置超链接不可选泽红

For all of the improvements that the JavaScript language has added over the past few years, like the [spread operator][], [default argument values, and arrow functions][default argument values_ and arrow functions], there are still a few features I'd love to see implemented. One such feature is optional chaining. Optional chaining allows developers to reference object properties which may or may not exist without trigger an error.

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

Take the following example case:

以以下示例为例：

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

Attempting to get a property of an undefined parent results in a `TypeError` which can brick your application. In this case we'd want to check to ensure that `css` property exists:

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

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

I wrote a [get and set utility called Objectifier][] to make referencing nested object properties easier, but with the [Optional Chaining proposal][], we now have a native way.

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

A simple example of optional chaining is:

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

const skills = person?.skills;

You can continue the pattern down the line of nested objects:

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

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

If ever a property doesn't exist, the chaining stops and `undefined` is returned. Optional chaining also supports bracket syntax:

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

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

You can also call a function without penalty:

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

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

You can even use the chaining syntax on the top level object:

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

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

You can even use destructuring with optional chaining:

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

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

If you want to set a fallback value in the case that a value is undefined, you can do so with `??`:

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

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

At the time of writing, optional chaining doesn't appear in any browsers yet, but you can play around with optional chaining at the [Babel online compiler][].

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

Optional chaining seems like a somewhat controversial change. It's been argued that developers should know and validate the objects they're using; on the other hand, the continuous nested property checking is a nightmare. I look forward to optional chaining in JavaScript. What are your thoughts?

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

> 翻译自: [https://davidwalsh.name/optional-chaining][https_davidwalsh.name_optional-chaining]

设置超链接不可选泽红

[spread operator]: https://davidwalsh.name/spread-operator
[default argument values_ and arrow functions]: https://davidwalsh.name/es6-features
[get and set utility called Objectifier]: https://davidwalsh.name/nested-objects
[Optional Chaining proposal]: https://github.com/tc39/proposal-optional-chaining
[Babel online compiler]: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBADgUwE4XDAvDA3gKBmAQwFsEAuGAIgBECA3ASwBMKAaPGCAa3oBseJyuGMIBWdAhGBJ6cKIPbCAZkmIIA7iCScBMANoUAsiBAAVY_1aUASggLAoFALpthMAL7s3LmAQDmZGABmADYcDxxQSFgsGGVVDS0IFhgE7XcMeGRUMAA6Ll5-AH4csVoJKRkoAG4gA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.5.5&externalPlugins=%40babel%2Fplugin-proposal-optional-chaining%407.2.0
[https_davidwalsh.name_optional-chaining]: https://davidwalsh.name/optional-chaining