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 にジャンプしません。

推薦する

MySQL データベースのインストールと Navicat for MySQL の使用に関するチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...

Linuxカーネルのアクセス制御セキュリティを強化する方法

背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...

MySQL で単一のデータベースまたはテーブルを復元する方法と、起こりうる落とし穴

序文:最も一般的に使用される MySQL 論理バックアップ ツールは mysqldump です。通常...

Vue 仮想 DOM の問題について

目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

MySql のサブクエリ内のクエリ例の詳細な説明

北西を見ると私の故郷はどこにあるでしょうか。南東の満月を何度見たことがあるでしょうか。月が再びゆっく...

VantフレームワークをWeChatアプレットに導入するプロセス全体の記録

序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...

ApacheのDjangoオンライン展開方法

環境: 1. Windows Server 2016 Datacenter 64 ビット 2. SQ...

よく使われるシングルページアプリケーションウェブサイト共有

CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

CSSインジェクションの知識の要約

最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

CSS3のwebkit-box-reflectを巧みに使用して、さまざまな動的効果を実現します。

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

Mysql接続数の設定と取得方法

接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...

WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...