ES6スコープに基づく代入と構造化の詳細説明

この記事では、ES6 に基づいたスコープと構造化割り当てについて詳しく説明します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ES6 は厳密モードを強制的にオンにします

スコープ

•var は中括弧の外側でもアクセスできる for/if で定義された変数を宣言します

•let はブロック スコープで変数を宣言します。繰り返しの定義

•const は定数を宣言、ブロックスコープ、宣言時に割り当てる必要があり、変更できません

// const声明的k指向一个对象，k本身不可变，但对象可变

function test() {
 const k={
  a:1
 }
 k.b=3;
 
 console.log(k);
}

test() 代入の構造化

{
 let a, b, 3, rest;
 [a, b, c=3]=[1, 2];

 console.log(a, b);
}
//output: 1 2 3

{
 let a, b, 3, rest;
 [a, b, c]=[1, 2];

 console.log(a, b);
}
//output: 1 2 undefined

{
 let a, b, rest;
 [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
 console.log(a, b, rest);
}
//output:1 2 [3, 4, 5, 6]

{
 let a, b;
 ({a, b} = {a:1, b:2})

 console.log(a ,b);
}
//output: 1 2

使用シナリオ

変数交換

{
 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);
}
//output: 1 4

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

オブジェクトの構造化と代入

{
 let o={p:42, q:true};
 let {p, q, c=5} = o;

 console.log(p ,q);
}
//output: 42 true 5

json 値の取得

{
 let metaData={
  title: 'abc',
  test: [{
   title: 'test',
   desc: 'description'
  }]
 }
 let {title:esTitle, test:[{title:cnTitle}]} = metaData;
 console.log(esTitle, cnTitle);
}
//Output: abc test

関連する推奨事項:

ES6 の新しい配列メソッドの詳細な例

React での es6 の適用の詳細な例

ES6のJavaScriptの関数バインディングとクラスイベントバインディング関数について詳しく解説

以上がES6スコープに基づく代入と構造化の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。