JavaScriptの新機能

Originally published on inspiredwebdev.com

畝
この記事(2019年10月24日)を書く日の時点で、オプションの連鎖はTC 39プロセスのステージ3にあります.そして、あなたがまだあなたのブラウザでそれを使うことができないということを意味します.
TC 39プロセスhereの段階についての詳細を読むことができます.
畝

任意の連鎖は何ですか？

我々のユーザーを代表するこれらの単純なObjectをしましょう.

const user1 = {
    name: 'Alberto',
    age: 27,
    work: {
        title: 'software developer',
        location: 'Vietnam'
    }
}

const user2 = {
    name: 'Tom',
    age: 27
}

我々のユーザーのジョブタイトルを表示したいとしましょう.
ご覧の通り、workはObjectの任意のプロパティですので、次のように書きます.

let jobTitle;
if (user.work){
    jobTitle = user.work.title
}

または三項演算子を使う

const jobTitle = user.work ? user.work.title : ''

titleのプロパティworkにアクセスする前に、ユーザーがworkを持っていることを確認する必要があります.
単純なオブジェクトを扱うとき、それはそれほど大きなものではありません、しかし、我々がアクセスしようとしているデータが深く入れ子にされるとき、それは問題でありえます.
これは、オプションの連鎖?.オペレーターが救助に来るところです.これは、この新しい演算子でコードを書き換える方法です.

const jobTitle = user.work?.title

完了!より簡潔で読みやすい.
上記のコードをdoes the user have a work property? if yes, access the title property inside of itと読むことができます

const user1JobTitle = user1.work?.title;
// software developer
const user2JobTtile = user2.work?.title;
// undefined

我々がObjectで利用できない資産を打つとすぐに、オペレーターはundefinedを返します
これらの2つのユーザとそれらの学校記録のようなオプションの特性で深い入れ子になったオブジェクトを扱うことを想像してください.

const elon = {
    name: 'Elon Musk',
    education: {
        primary_school: {   /*  primary school stuff */ },
        middle_school: { /* middle school stuff */ },
        high_school: {/* high school stuff here */},
        university: {
            name: 'University of Pennsylvania',
            graduation: {
                year: 1995
            }
        }
    }
}

const mark = {
    name: 'Mark Zuckerberg',
    education: {
        primary_school: {   /*  primary school stuff */ },
        middle_school: { /* middle school stuff */ },
        high_school: {/* high school stuff here */},
        university: {
            name: 'Harvard University',
        }
    }
}

私たちのすべてのユーザーが大学で勉強しているように、プロパティはオプションであり、同じように卒業のために行くいくつかの低下していると研究を終えていない.
今私たちの2つのユーザーの卒業年にアクセスしたいと思います:

let graduationYear;
if(
    user.education.university && user.education.university.graduation && user.education.university.graduation.year){
        graduationYear = user.education.university.graduation.year;
}

オプションの連鎖演算子を指定します.

const elonGraduationYear = elon.education.university?.graduation?.year;
// 1992
const markGraduationYear = mark.education.university?.graduation?.year;
// undefined

これは、この新しい演算子で任意のプロパティにアクセスする方法です.場合は、それを使用して起動する場合は、それは私は非常に学習を推奨するタイプスクリプト3.7の一部になるだろう!あなたはTypeScript 3.7 hereについての詳細を読むことができます
また、この演算子を使用して起動するには、Babelを使用できます.
畝
読書ありがとうございます.より多くのために、InspiredWebDevで私のブログの上で、または、私の後を追ってください.



AmazonとLeanpubの上で私の電子ブックを得てください