メモを読む:で、深さES6(V)を理解します

第V章の解体:データアクセスがより便利に

第1節なぜ解体機能?

  、開発者は、オブジェクトからES5内の特定のデータの配列を取得し、変数に割り当てられ、均質化に見える多くのコードを記述します。例えば:

1 LETオプション= {
 2      REPEAT:trueに3      割引:
4  };
 5  
。6  // オブジェクトのデータから抽出された
。7 LETのREPEAT = options.repeat、
 図8      に保存= options.save。

  目的関数は解体する情報を取得するプロセスを簡素化します

 

第2のオブジェクトの解体

  1. オブジェクト解体構文はリテラルオブジェクトを設定し、代入演算子に残されます例えば:

1つの LETノード= {
 2      タイプ: "識別子" 3      名: "FOO"
 4  } 
5 LET {タイプ、名前} = ノード。 6 7にconsole.log(タイプ)。// "識別子" 8はconsole.log()。 // "foo"という

  2. デフォルト。

  解体の割り当て、存在しないプロパティは、デフォルト値を定義することができます。例えば:

1つの LETノード= {
 2      タイプ: "識別子" 3      名: "FOO"
 4  } 
5 LET {タイプ、名前、値= } = ノード。
6にconsole.log(タイプ)。// "識別子" 7はconsole.log(名); // "foo"という 8にconsole.log(値)。//

  3. 同じ名前を持つ非ローカル変数。

    あなたがオブジェクトのプロパティの値を格納するために別の命名法ローカル変数を使用したい場合は、そのような拡張構文を達成するために使用することができます。例えば:

1つの LETノード= {
 2      タイプ: "識別子" 3      名: "FOO"
 4  }
 5  
6 LET {タイプ:localType、名前:ローカル名} = ノード。
7  
8にconsole.log(localType)。// "識別子" 
9はconsole.log(ローカル名)。// "foo"という

  4. ネストされたオブジェクトは解体します。

  解体ネストされたオブジェクトと似た文法オブジェクトリテラル。目的の情報を得るために分解することができます。例えば:

1つの = LETノード{
 2      "識別子":タイプ3      名: "FOO" 4      LOC:{
 5          スタート:{
 6              行:1 7              列:1
 8          }、
 9          終了:{
 10              行:1 11              カラム:4
 12          }
 13      }
 14  }。
15  
16 LET {LOC:{}開始} = ノード。
17  
18にconsole.log(start.line)。//1 
19にconsole.log(start.column)。// 1

 

第3節配列解体

  1. データは、解体の解体等のオブジェクト、例を参照してください。

1色は= [、「赤」、「緑」、「青」ましょう]。
2 [firstColor、secondColor] =せて色を、
3にconsole.log(firstColor)。// "赤" 
4はconsole.log(secondColor)。// 「グリーン」

  2. 分割代入例えば:

1色は= "赤"、 "緑"、 "青"ましょう]、
 2      firstColor = "黒" 3      secondColor = "パープル" 4  
5 LET [firstColor、secondColor] = 色。
6  
7にconsole.log(firstColor)。// 「赤」

  3. デフォルト値を設定します。

  つまり、あなたは存在しないプロパティのデフォルト値を追加することができます。例えば:

1せ色=「赤」]。
2 [firstColor、secondColor = "緑"] =せて色を、
3  
4にconsole.log(firstColor)。// "赤" 
5はconsole.log(secondColor)。// 「グリーン」

  4. ネストされたクラスのデータ解体。

  解体及びそのような構文とネストされたオブジェクトは、元のアレイモードで別の配列パターンを挿入します。例えば:

1せ色= "赤"、[ "緑"、 "ライトグリーン"]、 "青" ]。
2 [firstColor、[secondColor] =せて色を、
3  
4にconsole.log(firstColor)。// "赤" 
5はconsole.log(secondColor)。// 「グリーン」

  5. 不確定要素。

  アレイでは、特定の変数「...」構文によって、配列要素が載るように割り当てます。例えば:

1色は= [、 "赤"、 "緑"、 "青"ましょう];
 2 LET [firstColor、... restColors] = 色。
3  
4にconsole.log(firstColor)。// "赤" 
5はconsole.log(restColors.length)。// 2 
6はconsole.log(restColors [0])。// "グリーン" 
7はconsole.log(restColors [1])。// 「青」

 

第4混合解体

  解体する解体オブジェクトと配列解体を混合する方法。上述したものの一般的に同様の方法、及び解体する解体のアレイ。詳細については、本のP.101を参照してください。

 

第5節解体パラメータ

  1 。解体パラメータは、すなわちパラメータは、特定のオブジェクトデータタイプパラメータで読みやすいコードに分解します。例えば:

  次のように最初の機能は、あります:

1つの 関数ますsetcookie(名前、値、オプション){
 2つの      オプションオプション|| = {};
 3  
4。      セキュア=せ、options.secure
 5。          =パスoptions.path、
 6。          ドメイン= options.domain、
 7。          =の有効期限options.expiresを
 8。 
図9は、     // クッキーコードセット
10  }
 11  
12である 。// 第三のパラメータがオプションにマッピングされている
13れるますsetcookie( "タイプ"、 "JS"は、{
 14は、      セキュア:trueに15は、      有効期限:60000
 16 });

  我々はパラメーターを分解した場合は、書くことができます。

1  関数ますsetcookie(名前、値、{セキュアな経路、ドメイン、有効期限が切れる}){
 2      // 设置クッキー代码
3  }
 4ますsetcookie( "タイプ"、 "JS" 、{
 5      セキュア:真は6      満了する:60000
 7 } );

  しかし、この場合には、パラメーターが文句を言うでしょう合格しないならば、私たちはのために最適化することができます。

1  関数ますsetcookie(名前、値、{セキュアな経路、ドメイン、有効期限が切れる} = {}){
 2      // 设置クッキー代码
3  }
 4ますsetcookie( "タイプ"、 "JS" 、{
 5      確保:図6は、      有効期限が切れます。 60000
 7 })。

  このように、パラメータを渡していない場合でも、その後の使用のためのデフォルトの空のオブジェクトがあり、プログラムはエラーをスローしません。

 

  2.解体パラメータエラーを防ぐためにも使用することができるデフォルトパラメータを割り当てるために解体値慣行を、実際のアプリケーション・プロセスは、あまり使用されない可能性があります。興味のある方は、書籍P.104、P105を参照することができます。

 

(この節の終わり)

 

おすすめ

転載: www.cnblogs.com/zxxsteven/p/11458304.html