JS 開発効率を上げる4つの超実践的なヒント

JS 開発効率を上げる4つの超実践的なヒント

1. 短絡判定

この方法は、単純なif条件のみが必要な場合に使用できます。

x = 0 とします。
foo = () とすると、 console.log('実行されました');

x === 0 の場合
  関数foo()
}

同じ if 関数は&&演算子を使用して実現できます。 && の前の条件がfalseの場合、 && の後のコードは実行されません。

x = 0 とします。
foo = () とすると、 console.log('実行されました');

x === 0 && foo()

さらに if 条件を追加することもできますが、これによってもステートメントの複雑さが増すため、2 つ以上の条件を追加することはお勧めしません。

x = 0 とします。
y = 0 とします。
foo = () とすると、 console.log('実行されました');

x === 0 && y === 0 && foo()

2. オプション連鎖演算子 (?)

バックグラウンド API によって返されるデータが正しいかどうかわからないことがあるため、JS オブジェクトにkeyが存在するかどうかを頻繁に確認します。

userオブジェクトには、属性nameを持つオブジェクトが含まれています。name nameには、属性firstNameがありますuser.name.firstName直接判定に使用した場合、name 属性が存在しない場合はエラーが報告されます。したがって、判定を行う前に、user.name が存在するかどうかも判定する必要があり、2 層のネストされた if 判定が必要になります。

ユーザー = {
  名前 : {
    名 : 'あおふかおし'
  }
}

if(ユーザー名){
  if(ユーザー名.firstName){
    console.log('ユーザーオブジェクトにfirstNameフィールドが含まれています')
  }
}

このとき、 ? user.nameを使用して操作を簡略化できます。user.name が存在しない場合はfalseも返されるため、1 層の判断を直接使用できます。

ユーザー = {
  名前 : {
    名 : 'あおふかおし'
  }
}

if(user.name?.firstName){
  console.log('ユーザーオブジェクトにfirstNameフィールドが含まれています')
}

3. ヌル合体演算子 (??)

if/else と比較すると、三項演算子ははるかに短くなります。ロジックが単純であれば、使用するのに便利です。

例えば:

ユーザー = {
  名前 : {
    名 : 'あおふかおし'
  }
}

foo = () => {とする
  user.name?.firstName を返します。 
    ユーザー名: 
    「firstName が存在しません」
}

コンソールログ(foo())

まず、? 演算子を使用して存在するかどうかを判断します。存在する場合は false を返します。存在しない場合は false を返します。次に、次のロジックに進みます。

?? アルゴリズムを使用してコードをより簡潔にします

ユーザー = {
  名前 : {
    名 : 'あおふかおし'
  }
}

foo = () => {とする
  user.name?.firstName ?? を返します。 
  「firstName が存在しません」
}
  
コンソールログ(foo())

4. 終了関数を返す

次の関数は、 if elseネストを多用してxの値を決定します。

x = 1 とします。
foo = () => {とする
  x < 1の場合{
    'x は 1 未満' を返します
  } それ以外 {
    もし(x > 1){
      'xは1より大きい'を返す
    }それ以外{
      'xは1に等しい'を返す
    }
  }
}

コンソールログ(foo())

このif elseネストにより、 returnステートメントがコードの実行を終了して関数に戻るため、 else条件を削除してコードを簡素化できます。

x = 1 とします。
foo = () => {とする
  x < 1の場合{
    'x は 1 未満' を返します
  }
  もし(x > 1){
    'x はより大きい' を返す
  }
  'xは1に等しい'を返す
}

コンソールログ(foo())

これで、開発効率を向上させる 4 つの超実用的な JS のヒントに関するこの記事は終了です。開発効率を向上させる 4 つの実用的な JS のヒントの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 珍しいけれど役に立つJSテクニックをいくつか紹介します
  • JavaScript 文字列操作の 4 つの実用的なヒント
  • 実践的なJavascriptデバッグスキルの共有(概要)
  • JavaScript の実用的なヒントのまとめ
  • JavaScript 実践コードのヒント
  • vue.js プロジェクトにおける実用的なヒントのまとめ
  • JavaScript 実行効率を向上させる 23 の実用的なヒント
  • AngularJS 実践開発スキル(推奨)
  • 49 個の JavaScript のヒントとコツ

<<:  Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

>>:  Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

推薦する

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

Vue3サンドボックスの仕組みの詳しい説明

目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する参照する序文vue3サンドボック...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...

Ubuntuが仮想マシンでインターネットに接続できない問題の解決策

インターネットに接続できない仮想マシンをセットアップするのは非常に面倒です。ここでは、Ubuntu ...

メタタグにおける http-equiv 属性の使用の概要

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもし...

構造とプレゼンテーションの分離を理解するためのWeb標準の学習

Web 標準について議論するときに必ず話題になるのは、構造とプレゼンテーションを分離することの重要性...

JavaScript インスタンス オブジェクトでプロトタイプ メソッドをオーバーライドする方法の詳細

目次JavaScriptでは、通常、次のコードのようにクラスを簡単に定義できます。 var サンプル...

リアルタイムコンピューティングフレームワークFlinkクラスタの構築と動作メカニズムについての簡単な説明

目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...

VueはCanvasを使用してランダムなサイズで重なり合わない円を生成します

目次キャンバス関連文書エフェクト画像表示ケースの完全なコード親コンポーネントコードサブコンポーネント...

Vue.js ドラッグ可能なテキストボックスコンポーネントの使用方法の詳細な説明

目次コンポーネントの登録コンポーネントの追加ソースコードドラッグ可能なテキスト ボックスでは、ユーザ...

Centos7 に yum 経由で MySQL をインストールする方法

1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...

Ubuntu 16.04にJenkinsをインストールするための詳細な手順

1. 前提条件JDKがインストールされましたecho $PATHソフトリンクを作成し、JDKのインス...

ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する

Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...

純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法

プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...