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

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

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

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

例をご覧ください:

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

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

直接エラー報告:

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

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

値が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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • より良い JavaScript 条件文と一致条件を書くためのヒント (要約)
  • JSの矢印関数におけるこのポイントの詳細な説明
  • JavaScriptのアロー関数の特徴と通常の関数との違い
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JS 矢印関数に適さないシナリオは何ですか?
  • JavaScript で矢印関数を使用できないシナリオはどれですか

<<:  純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

>>:  ボタンのタイプが送信として指定されていません。ボタンをクリックしても、指定された URL にジャンプしません。

推薦する

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

Vue命令の動作原理と実装方法

Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...

dockerでPostgreSQLを実行する方法

1. Dockerをインストールします。参考URL: Docker 入門インストールチュートリアル ...

MySQL 8.0 DDLアトミック機能と実装原則

1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...

MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル

ブロガーはこう述べています。「私は『史上最も簡単な MySQL チュートリアル』という一連のブログ記...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

Linuxにログインする際の文字セットの問題を解決する方法

文字セットエラーは常に存在するロケール: LC_CTYPE をデフォルト ロケールに設定できません:...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

Linux システムで jmeter を実行し、ローカル メモリを最適化する方法の詳細な説明

1. Linuxシステムにクロスシステムファイル転送ツールをインストールするルートユーザーのルートデ...

CSS の 4 つのインポート方法と優先順位の簡単な分析

第一に: CSSを導入する4つの方法CSS を導入する方法には、インライン スタイル、埋め込みスタイ...

Vue はアップロードされた画像に透かしを追加する機能を実装します

この記事では、Vueでアップロードされた画像に透かしを追加する具体的な実装コードを参考までに共有しま...