3 JavaScriptでのオブジェクトの構造化の実際的な使用

これらの破壊パターンを使用して、よりクリーンなコードを記述します

これまでに、JavaScriptでの構造化についてはご存じでしょう。 ES6仕様で2015年に登場しましたが、ブラッシュアップする必要がある場合は、Mozillaの仕組みに関するすばらしい詳細な記事があります。

ただし、破壊がどのように機能するかを知ることは、それを使用する方法を知ることと同じではありません。コードをよりクリーンで、堅牢で、読みやすくするために使用できる3つの構造化パターンを以下に示します。

1.名前付き関数の引数

名前付き引数は、位置ではなく関数パラメーターを処理する代替方法です。引数を関数シグネチャと同じ順序で並べ替える代わりに、単に名前で引数を指定します。たとえば、Pythonの場合:

ご覧のとおり、引数の順序は重要ではありません。名前で指定するだけです。名前付き引数と定位置引数の利点は次のとおりです。

  1. 関数を呼び出すときに、1つ以上のパラメーターを省略することができます。
  2. 引数を渡すときに順序は関係ありません。
  3. 他の場所に存在する可能性のある関数を呼び出すときの読みやすいコード

JavaScriptには真の名前付き引数は存在しませんが、構造化パターンを使用して3つの同じ利点をすべて実現できます。上記と同じコードですが、JavaScriptを使用しています。

このパターンは、名前付き引数のすべての目標を達成します。引数cは省略できました。順序は関係ありません。引数を名前で参照することで引数を割り当てます。これはすべてオブジェクトの破壊によって可能になります。

2.サーバーレスポンスをきれいに解析する

多くの場合、サーバーレスポンスのデータブロックまたはデータブロック内の特定の1つの値のみが重要です。その場合は、構造化を使用して、サーバーが通常送信する他の多くのことを無視しながら、その値のみを取得できます。以下に例を示します。

このパターンを使用すると、引数の解析中にオブジェクトから値を引き出すことができます。無料でデフォルトを設定することもできます!これにより、3番目のパターンが表示されます…

3.割り当て中のデフォルト値の設定

変数または定数を割り当てるときの一般的なケースは、スコープに現在他の値が存在しない場合にデフォルト値を使用することです。

破壊する前に、次のようなことをして、目的の動作を実現できます。

//デフォルト値を設定する古い方法
var nightMode = userSettings.nightMode ||偽

ただし、これには、割り当てごとに個別のコード行が必要です。破壊すると、すべての割り当てとそのデフォルトを一度にすべて処理できます。

この破壊パターンは、Reactコンポーネントの状態設定に適用できます!

これらのパターンのいくつかをコードに適用できることを願っています!破壊の詳細については、以下のリンクをご覧ください。

もっと詳しく知る!