ES6 学習変数の構造化と代入

あまりにも多くの変数を記述するのは非常に面倒な場合があり、es6 では変数を宣言するためのより便利なさまざまな方法 (変数の構造化と代入) が提供されます。以下の記事ではES6における変数の構造化と代入に関する関連情報を中心に紹介していますので、必要な方は参考にしてください。

変数の構造化代入

ES6 では、特定のパターンに従って配列やオブジェクトから値を抽出し、変数に値を代入することができます。

配列の代入の構造化

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

上記のコードは、配列から値を抽出し、対応する位置に従って変数に代入できることを示しています。

本質的に、この書き方は「パターンマッチング」であり、等号の両側のパターンが同じである限り、左側の変数に対応する値が代入されます。

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

構造化が失敗した場合、変数の値は未定義になります。

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

不完全な分解

等号の左側のパターンが等号の右側の配列の一部とのみ一致する場合でも、この状況は不完全な分解と呼ばれます。 。

let [x,y] = [1,2,3]
x //1
y //2

等号の右側が配列でない場合、エラーが報告されます。 （横断可能な構造ではありません）。

特定のデータ構造が Iterator インターフェースを持っている限り、配列形式での分割代入が使用できます

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a+b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs は、ネイティブに Iterator インターフェースを持つ Generator 関数です。分割代入により値が取得されます。このインターフェースから順に。

デフォルト値

代入を分割するとデフォルト値を指定できるようになります。

var [foo=true] = [];
foo //true

ES6 は内部で厳密等価演算子 (===) を使用して、位置に値があるかどうかを判断します。したがって、配列メンバーが厳密に未定義と等しくない場合、デフォルト値は有効になりません。

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

式をデフォルト値として使用することもできます。式がデフォルト値として使用される場合、式は遅延評価され、使用された場合にのみ評価されます。

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

上記のコードでは、x が値を取得できるため、関数 f は実行されません。

デフォルト値は構造化代入の他の変数を参照できますが、変数は宣言されている必要があります。

オブジェクトの分割代入

分割代入は配列に適用でき、オブジェクトにも使用できます。

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

オブジェクトと配列の分割代入には 1 つの違いがあります。つまり、配列の要素は順番にソートされ、変数の値はその位置によって決まりますが、オブジェクトの属性は決まります。順序はありません。正しい値を取得するには、変数には属性と同じ名前が必要です。

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

変数名が属性名と一致しない場合は、次のように記述する必要があります:

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

実際、オブジェクトの分割代入は次の省略形です:

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

オブジェクトの割り当ての分割 内部メカニズムでは、まず同じ名前の属性を見つけて、それを対応する変数に割り当てます。実際には、前者ではなく後者が割り当てられます。

ただし、上記の書き方だと変数の宣言と代入が一緒になってしまい、letやconstの場合は変数の再宣言ができないので、代入された変数が一度宣言されているとエラーが報告されます。

オブジェクトの分割は、入れ子になった構造化オブジェクトにも使用できます。

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

このとき、pは変数ではなくパターンなので値は代入されません。

オブジェクトの分割代入では、デフォルト値を指定することもできます。デフォルト値の有効な条件は、オブジェクトの属性値が厳密に未定義に等しいことです。

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

分割モードがネストされたオブジェクトで、子オブジェクトの親プロパティが存在しない場合、エラーが報告されます。

var {foo:{bar}} = {baz:'baz'}

ES6 学習における変数の構造化と代入に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。