クールな構文

クールな構文シリーズの最初の投稿へようこそ!私はプロのようなきれいなJavaScriptコードを書く方法について、時々、ポストを出版するつもりです!
最初のテキストは任意の連鎖です.オブジェクトのコンテンツをはるかに短く、より簡単に読み取ることができる構文の砂糖.それをあなたに見せましょう.
オブジェクトのこの配列を見てください.

const art = [
    {
        type: "paining",
        about: {
            name: "The starry night",
            author: "Vincent van Gogh",
            year: "1889",
            medium: "Oil on canvas",
        },
        dimensions: {
            width: "92.1",
            height: "73.7",
        },
    },
    {
        type: "sculpture",
        about: {
            name: "David",
            author: "Michelangelo",
        },
        dimensions: {
            width: "517",
            height: "199",
        },
    },
    {
        type: "photography",
        about: {
            name: "Pillars of Creation (Eagle Nebula)",
            author: "Hubble Space Telescope",
        },
    },
];

我々はいくつかのデータを取得想像し、今私たちはart オブジェクトの配列.それでは、ログにしたいとしましょうtype 中の各オブジェクトのart 配列.

art.forEach(artPiece => {
    console.log(artPiece.type);
})

さて、ログをそれぞれheight .

art.forEach(artPiece => {
    console.log(artPiece.dimensions.height);
})

そしてエラーメッセージを表示します.それは私たちが持っていないからですdimensions (それぞれのオブジェクトで)、そして我々はそれからプロパティを取得しようとしている.

ソリューション1 &オペレーター

art.forEach(artPiece => {
    console.log(artPiece.dimensions && artPiece.dimensions.height);
})

解決2 -オプションの連鎖

art.forEach(artPiece => {
    console.log(artPiece?.dimensions?.height);
})

オブジェクト内の多くのオブジェクトを持つ複雑なオブジェクトを想像してください.w && w.x && w.x.y && w.x.y.z
対w?.x?.y?.z私は、あなたがなぜオプションの連鎖がより良い解決(構文に関して)であるかについてわかっていると思います!
あなたがこの短い構文関連のポストを楽しんだことを願っています!私の以前の記事をチェックアウトし、よりクールなJavaScriptのもののために調整滞在!
歓声
ダグラス