解体:ES6は3を取得します

  • 解体の配列
  • オブジェクトの解体
  • 関連問題の声明と解体
  • 脱構築と繰り返し割り当て
  • 需要解体
  • デフォルト値が割り当てられ、
  • 解体パラメータ

 解体(非構造):構造化代入

解体は、通常ES6のための構造化された割り当て方法とみなし、単一の変数として、配列要素またはオブジェクトプロパティを解体することによって分割することができます。同じ名前の場合、コードの量を削減する目的に多重名を実装することができる、基本的な目的は、コードの解体の量を低減することです。

ES6 の配列から要素を分割して行う方法を、変数に代入するには?

1つの 関数のfoo(){
 2      リターン [1,2,3 ]。
3  }
 4  VARの TMP = FOO()、
 5      = TMP [0]、B = TMP [1]、C = TMP [2 ]。
6にconsole.log(A、B、C)。// 1 2 3

ES6のコード配列を使用して解体。

VAR [A、B、C] = FOO()。

ES6 前に、変数のトランスコーディングを行うなどのオブジェクトからプロパティを分割しますか?

1つの 関数バー(){
 2      リターン{
 3          X:4 4          Y:5 5          Z 6
 6      }
 7  }
 8  VARの TMP = バー()、
 9      X = tmp.x、Y = tmp.y、Z = tmp.z;
10にconsole.log(X、Y、Z)。// 4 5 6

ES6解体コードオブジェクトのプロパティ:

1つの VAR {X:X、Y:Y、Z = Z}バール(); // この行も略すことがあります。var {X、Y、Z} =バール(); 
2はconsole.log(X、Y 、Z); // 4. 5. 6。

 オブジェクトプロパティの割り当てモード:

シンタックスの解体の上を参照してください、最初の質問は、変数に割り当てられた要素や属性の値を意味するものによって配列やオブジェクトのですか?その背後にある論理は、もはや我々の注目に値する、ここで探索するために複雑されていないことは、要素またはプロパティへの参照で、変数名で表現でしょうか?あなたは解体の配列を見ると、まだ理解することは比較的容易です。

VAR [A、B、C] = FOO()。

実施例から分かるように、Bは、メソッドを実行する方法のインデックス値に対応する配列インデックスのfoo()の「[]」cは変数の名前であるが、それらは実際に括弧であり、対応する位置に割り当てられています変数。、プロパティ値のオブジェクト参照を表していることを意味し、変数、注釈の例が書かれている簡単な方法である「×」:そして、これは、私たちは「X」の左側にある解体式の解体の対象がいることを推測することができます変数の多重化は、変数名としてオブジェクトの属性名。あなたはそれを解体して、新しい変数名を宣言したい場合は?

{X:BAM、Y:バズ、Z:BAP}せ=バール()。

これは、オブジェクトのように、左の構造ので、割り当てモードをオブジェクト属性ですが、割り当ての文法構造が左から右にあり、右側には、左のプロパティ名にオブジェクト引数の割り当てではありません。

 表現とに関連した問題のいくつかを分解:

通常の開発では、我々は時々執筆のこの方法の適用範囲の最初の行に変数名を書きたいと思い書き込みを標準コードとして開発された開発ハンドブック、書かれている、この時点でのオブジェクト構造は、追加する必要があります括弧は、「{}」ブロックレベル範囲として解釈される回避します。

1つの VAR A、B、C、X、Y、Z、
 2 [A、B、Cは、= (FOO)を、
 図3({X、Y、Z} =バール()); // オブジェクトの場合、この解体括弧を書くことを覚えておいてください

 属性は、解体を用いて計算することができます。

 このようなオブジェクトに別のオブジェクトを追加する必要性として、解体のプロパティは、達成するための方法の性質を用いて計算することができます。

1つの VAR "X"を= 2      O = {};
 3。({[]:O [どの]} =バール()); // 本質的に同じ({X:0.xである})
4。コンソール。ログ(OX); // 4

 脱構築と繰り返し割り当て:

ロジック解体伝統的な価値以上の一連を経て、プロパティの値は、再利用可能なオブジェクトを理解することは非常にシンプルな解体、以下を参照してください:

1つの VAR {S:M、S:= {S} N-10}; // 再利用の割り当て属性がm、N-値
2にconsole.log(M、N-する); // 10 10

そして、より洗練された解体リピート割り当ての一部を再生します:

1つの VAR {A:{X:X-、X:Y}、A = {A}:{X :. 1 }};
 2つの // 分析:
3  // 最初のステップ
4。 // ({X:X、X: }、Y = {X :. 1}); A = {X:} 1; 
5。 // 第二の部分
6。 // X- = 1、Y = 1の、。。

繰り返し割り当て解体の配列に来ます:

1つの VAR {A:X-、A:Y、A:[Z]} = {A:[1 ]};
 2  // 分析
3  // 最初のステップ
4。 // X- =、Y = [1] [1] 、([Z] = [1]); 
5  // 第二の部分
6  // Z = 
1、。。7にconsole.log(X、Y、Z); // [1] [1] 1 
。8、X [0] 10 = ;
 9 Y.push(2 10にconsole.log(X、Y、Z); // [10,2]、[10,2] 1

この上記の例により、単に参照することによって割り当てる解体アウト値型のアプリケーションを示し、そこに引用された修飾されたプロパティ値を有するファイルをクローニングしていない、すべての参照は、他に適用されます。

 需要解体:

プレス解体の解体は属性と要素を望んでおり、許可された属性と要素を一致させることができない、対応する変数が宣言されていますが、割り当てられていません。

1つの VAR [,, C、D] = [1,2,3 ]。
2  VAR {Z、W} = {X 10、Y 20、Z 30 }。
3にconsole.log(C、D)。// 3不定
4にconsole.log(Z、W)。// 未定義30

 デフォルト値の割り当て:

上記の不一致で、デフォルト値はまた、脱構築で達成することができる提供された方法にES6のデフォルトパラメータを思い出させます:

1つの VAR [A = 3、B = 6、C = 9、D = 12] = [1、2、3 ]。
2にconsole.log(A、B、C、D)。// 1つの2 3 12 
3  VAR {X、Y、Z、50 = W} = {X 10、Y 20、Z 30 }
 4にconsole.log(X、Y、Z、W)。// 10 20 30 50

 解体パラメータ:

解体は、本質的に起動割り当てに変数宣言および行為の一種であるので、この操作はもちろん、伝統的な値は非常に便利になってきていることができるだけでなく、パラメータ型変換のトラブルを解消するために使用される方法、のパラメータの内部に配置することができますそして解体。

1つの 関数([X、Y]){
 2      にconsole.log(X、Y)
3  }
 4のfoo([1,2])。// 1 2

可変引数オブジェクトが解体さなどのパラメータを受け取ります。

変数交換解体を使用して、興味深いアルゴリズムへの最後の質問は、2つの値を達成します:

1つの VARの A = 10、B = {値: "B" }。
2 [A、B] = [B、A]。
3にconsole.log(A、B)。// {値:10} 10

 最後に、あなたが大量の参加を実現するために、このような解体のデフォルト値+パラメータのデフォルト値としてこれらの非常に複雑なアプリケーションを、達成するための構文の包括的な解体を使用することができ、ネストされたデフォルト:解体再編は、参照は「あなたはJSを知らない」であってもよい低ボリュームP86〜P90 。

おすすめ

転載: www.cnblogs.com/ZheOneAndOnly/p/11349573.html