ES6学習用の分解代入例を詳しく解説-jsチュートリアル-php.cn

ES6学習用の分解代入例を詳しく解説

零下一度

リリース： 2017-06-26 14:51:13

オリジナル

1654 人が閲覧しました

1. 構造化代入の定義

簡単に理解すると、代入 = 記号の左側と右側は、1 対 1 の代入ステートメントを実行するために同じ構造を持っているということです

2. の分類分割代入

配列分割代入オブジェクト分割代入文字列分割代入ブール値分割代入関数パラメータ分割代入数値分割代入 (最初の 2 つの理解に重点を置く)

3 つ目、各カテゴリを個別に説明します

1、配列の分割代入（以下にコードを示し、わかりやすいように必要なコメントを追加しています）

{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b);//输出1,2 直接将1和2解构到a和b}

ログイン後にコピー

変数のデフォルト値を設定することもできます。例えば、以下のコードのcはデフォルトで3になります。 . 分解する場合、例えば [a,b,c ]=[1,2] c が分解されない場合、c は未定義になります

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  console.log(a,b);}

ログイン後にコピー

使用シナリオ1

①、変数交換

{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);
}

ログイン後にコピー

②、抽出した関数の値を直接返します（代入を分割せずに、まず結果を取得してからインデックスを介して取得する必要があります）

{  function f(){return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}

ログイン後にコピー

③の必要な値の一部のみを取り出します。返された結果

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 输出1 4
}

ログイン後にコピー

④. 配列の内容の長さは気にしない

{  function f(){return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
  console.log(a,b);//输出1,[2,3,4,5]
}

ログイン後にコピー

2. オブジェクトの分割と代入

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}

ログイン後にコピー

デフォルト値を設定するためのオブジェクトの分割と代入

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//输出3 5
}

ログイン後にコピー

オブジェクトの構造化と代入によるローグ

以上がES6学習用の分解代入例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。