JavaScript 関数をよりエレガントにする方法

JavaScript 関数をよりエレガントにする方法

これから js のスキルシリーズを書いていきます。主に js のさまざまな実用的なヒントやコツをまとめることにします。この記事では主に、関数をより明確にする方法について検討します。

分割代入を使用したオブジェクトパラメータ

関数に多くの引数(2 つ以上)を持たせたい場合は、オブジェクトを使用する必要があります。これに基づいて、分解構文を使用して必要なパラメータを抽出できます。

通常の書き込み

const 挨拶 = (obj) => {
  `${obj.greeting}, ${obj.firstName}${obj.lastName}` を返します。
}

リライト

const 挨拶 = ({
  挨拶、
  ファーストネーム、
  苗字
}) => {
  `${greeting}, ${firstName}${lastName}` を返します。
}

分解を使用すると、よりエレガントになり、繰り返しを少なく記述でき、命名も明確になります。

コールバック関数の命名

適切な名前を付けるとコードが読みやすくなりますが、コールバック関数に名前を付ける場合も同様です。

通常の書き込み

定数 arr = [1, 2, 3].map(a => a * 2);

リライト

定数倍 = a => a * 2;
定数 arr = [1, 2, 3].map(double);

別々に名前を付けることで、上記のようにコードの意味を一目で確認しやすくなります。名前から、コールバック関数を使用して元の配列の各要素を 2 倍にすることは明らかです。

条件文を説明的にする

複雑な条件判断の場合は、関数のみを使用して表現することができ、条件文がより説明的になります。

通常の書き込み

if (スコア === 100 || 残りのプレイヤー数 === 1 || 残りのプレイヤー数 === 0) {
    ゲームを終了します();
  }

リライト

定数勝者が存在する = () => {
  スコアを返す === 100 ||
    残りのプレイヤー数 === 1 ||
    残りプレイヤー数 === 0
}
勝者が存在する場合(){
  ゲームを終了します();
}

原文のままだと括弧内の表現が長いのですが、何を判断しているのかわかりにくいです。書き直した後は名前付き関数に入れ、名前から式の意味を大まかに把握できるようにしました。

switch ステートメントを Map または Object に置き換える

switch ステートメントが長い場合は、コードを簡素化する必要があることを意味します。

通常の書き込み

const getValue = (prop) => {
  スイッチ(プロパティ){
    ケース 'a': {
      1 を返します。
    }
    ケース 'b': {
      2を返します。
    }
    ケース 'c': {
      3 を返します。
    }
  }
}
定数 val = getValue('a');

オブジェクトの書き換え

定数オブジェクト = {
  a: 1、
  b: 2,
  3: 3 です
}
定数val = obj['a'];

特定のプロパティ値の戻り値を取得するためだけに、複数の return ステートメントを含む複数のブロックをネストするために switch を使用しますが、1 つのオブジェクトを使用しても同じ効果が得られます。

マップの書き換え

const map = 新しい Map([['a', 1], ['b', 2], ['c', 3]])
定数val = map.get('a')

Map を使用すると、コードも大幅に短くなります。各項目にキーと値が含まれる配列を渡します。次に、Map インスタンスの get メソッドを使用して、キーから値を取得します。 Object よりも Map の方が優れている点の 1 つは、数値、ブール値、オブジェクトなどの他の値をキーとして使用できることです。オブジェクトのキーとして使用できるのは文字列またはシンボルのみです。

Object.assign を使用してデフォルトのプロパティを設定する

通常の書き込み

const menuConfig = {
  タイトル: null、
  本文: 'バー'
};
関数createMenu(config) {
  config.title = config.title || 'Foo';
  config.body = config.body || 'バー';
}
メニューを作成します(menuConfig);

リライト

const メニュー構成 = {
  タイトル: 「オーダー」
  本文: '送信'
};
関数createMenu(config) {
  config = オブジェクト.assign({
    タイトル: 「Foo」、
    本文: 'バー'
  }, 設定);
  // 設定: {title: "Order", body: "Bar"}
  // ...
}
メニューを作成します(menuConfig);

重複したコードを削除し、類似の機能を統合し、非推奨のコードを削除します

悪い文章

var paging = function(currPage){
    (現在のページが0以下の場合)
        現在のページ = 0;
        jump( currPage ); // ジャンプ }else if ( currPage >= totalPage ){
        currPage = 合計ページ数;
        jump( currPage ); // ジャンプ }else{
        jump( currPage ); // ジャンプ }
};

リライト

var paging = function(currPage){
    (現在のページが0以下の場合)
        現在のページ = 0;
    }それ以外の場合 (currPage >= totalPage){
        currPage = 合計ページ数;
    }
    jump( currPage ); // ジャンプ関数を分離する };

抽出機能

関数が長すぎて、読みやすくするために複数のコメントが必要な場合は、これらの関数をリファクタリングする必要があります。

関数内に分離できるコードセクションがある場合は、このコードを別の独立した関数に配置するのが最適です。

たとえば、ユーザー情報を取得する関数では、ユーザー情報に関連するログも出力する必要があります。

var getUserInfo = 関数(){
    ajax( 'http:// xxx.com/userInfo', 関数( データ ){
        console.log( 'userId: ' + data.userId );
        console.log( 'ユーザー名: ' + data.ユーザー名 );
        console.log( 'ニックネーム: ' + data.ニックネーム );
    });
};

リライト

print log ステートメントを別の関数にカプセル化できます。

var getUserInfo = 関数(){
    ajax( 'http:// xxx.com/userInfo', 関数( データ ){
        printDetails(データ);
    });
};

var printDetails = 関数(データ){
    console.log( 'userId: ' + data.userId );
    console.log( 'ユーザー名: ' + data.ユーザー名 );
    console.log( 'ニックネーム: ' + data.ニックネーム );
};

参考資料: JavaScript リファクタリングのヒント - 関数をより明確かつクリーンにする「JavaScript のデザイン パターンと開発プラクティス」

要約する

JavaScript 関数をよりエレガントにする方法に関するこの記事はこれで終わりです。エレガントな JavaScript 関数に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS関数の継承について学ぶ記事
  • js の関数の長さはどれくらいですか?
  • JavaScript 基礎シリーズ: 関数とメソッド
  • JavaScriptのスリープ関数の使用
  • PHP の組み込み関数 json_encode と json_decode の例外処理
  • JavaScript の 50 以上のユーティリティ関数の概要
  • JavaScriptコールバック関数の詳細な理解
  • JavaScript で外部変数にアクセスするサブ関数の 3 つのソリューション
  • JavaScript 関数型プログラミングの基礎

<<:  Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明

>>:  NginxにLuaモジュールを追加する方法

推薦する

CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...

要素テーブルヘッダー行の高さの問題の解決

目次序文1. 問題の原因2. 解決策VueはelementUIテーブルtr thの高さと背景色を変更...

フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

Dockerイメージを完全にアンインストールする手順

1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...

Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明

サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...

Vueはvueメタ情報を使用して各ページのタイトルとメタ情報を設定します。

title: vue は vue-meta-info を使用して各ページのタイトルとメタ情報を設定...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

MySQLで現在の時間間隔の前日のデータをクエリする

1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...

MySQL データ型の最適化の原則

MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...

Docker Alpine イメージのタイムゾーン問題に対する完璧な解決策

最近、Docker を使用して Java アプリケーションをデプロイしていたときに、タイムゾーンが間...

0.1秒の価値!フロントエンドのウェブページの高速化の問題について簡単に説明します

私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

uni-app で scss を使用するサンプル コード

遭遇した落とし穴私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決すること...