これから 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明
目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...
1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...
実際、IE6 が本当にいつ消滅するのか私たちは毎日疑問に思っていますが、2001 年のリリース以来、...
この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...
結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...
1. web01にzabbix-agentをインストールするZabbix ウェアハウスをデプロイする...
序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...
1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...
Spring Boot プロジェクトでは、Docker コンテナ、jar、war の階層化パッケージ...
目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...
目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...
nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...
MySQLデータベースの保存場所: 1. MySQLがMyISAMストレージエンジンを使用する場合...