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 データベースをインストールする詳細なチュートリアル

推薦する

MySQL で中国語の文字をピンインでソートする簡単な例

名前を格納するフィールドが GBK 文字セットを使用している場合、GBK 内部コード自体がエンコード...

MySQL双方向バックアップの実装方法

MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...

よくある CSS エラーと解決策

コードをコピーコードは次のとおりです。 IE6 と FF の違い: background:orang...

CentOS 8で自動更新を設定するための手順を完了する

データとコンピューターに対してできる最善のことは、それらを安全に保つことです。アップデートを有効にす...

HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...

MySQLのクラスタモードでのgalera-clusterのデプロイメントの詳細説明

目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...

CSS3 は反転可能なホバー効果を実現します

CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...

TypeScript 名前空間のマージの説明

目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...

HTMLはテキスト行のインターセプトの実装原理とコードを超えています

複数行を超えるテキストをインターセプトするための HTML コードは次のとおりです。 HTML:コー...

Vueは、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。

目次テクノロジースタック効果分析するテクノロジースタックサイドバー用Antdtabは要素を使用します...

子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...