JavaScript の条件付きアクセス属性と矢印関数の紹介

1. 条件付きアクセス属性

?. は ES2020 で導入された新機能です。条件付きプロパティアクセス演算子です。 undefined変数のプロパティ値にアクセスするときに、. 演算子を使用すると、直接エラーが報告されます。条件付きプロパティアクセス演算子を使用してアクセスすると、 undefinedが返されます。

例をご覧ください:

本を{価格:10,
            エディション:10,
            名前:"javascript"
}

console.log(ブックのページ番号)

直接エラー報告:

TypeError: 未定義のプロパティ 'num' を読み取ることができません

book.pageの値はundefined 、 undefined属性値がないため、エラーが報告されます。

値がundefinedかオブジェクトか不明な場合は、 if 文で判断するだけでなく、条件アクセス演算子を使って直接プロパティにアクセスすることもできます。アクセス先のオブジェクトがundefinedであっても、エラーは報告されません。代わりに、undefinedを返します

console.log(ブックのページ番号?.num)

出力：

未定義

2. アロー関数の紹介

アロー関数は、 ES6で登場した関数を定義するための省略形で、 => を使用してパラメータリストと関数本体を区切ります。

例：

square = x=>x**2 とします。

コンソール.log(square(3))

出力：

9

この関数の定義は、従来の関数と同等です。

関数 square(x){
    x**2を返す
}

矢印関数は、名前のない関数を別の関数のパラメーターとして渡すためによく使用されます。

nums = [1,2,3,4].map(x=>x*2) とします。

console.log(数値)

出力：

[ 2, 4, 6, 8 ]

矢印関数を使用すると、コードがより簡潔になります。

従来のfunctionキーワードを使用して関数を定義すると、少し冗長に感じるでしょう。

数値 = [1,2,3,4].map(関数(x){戻り値 x*2})

console.log(数値)

矢印関数に複数のパラメータがある場合は、それらを括弧で囲む必要があります。

定数を追加すると (x,y) => x + y;

コンソールログ(追加(1,2))

矢印関数の本体に複数のステートメントがある場合は、本体を中括弧で囲み、 return キーワードを使用して値を返します。

const add = (x,y)=>{let tmp=x+y;return tmp};

コンソールログ(追加(1,2))

このとき、アロー関数の関数本体は、通常のfunction定義の関数本体の形式とまったく同じになります。そのため、矢印関数は、単純な 1 行のステートメントで簡潔かつ読みやすくなります。関数本体が複雑すぎる場合、矢印関数を使用して定義すると読みにくくなります。

これで、JavaScript の条件付きプロパティアクセスと矢印関数に関するこの記事は終了です。JavaScript の条件付きプロパティアクセスと矢印関数に関するより関連性の高い記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: