JS ES の新機能、変数分離割り当て

1. 配列の分離割り当て

1.1 配列分離割り当てとは何ですか?

ECMAScript 2015 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に割り当てることができます。これを分離割り当てと呼びます。

ECMAScript 2015 より前では、変数への値の割り当ては次のように行われていました。

a = 1 とします。
b = 2 とします。
c = 3 とします。

ECMAScript 2015 では以下が可能になります。

[a, b, c] = [1, 2, 3]とします。

ECMAScript 2015の分離された割り当ては、本質的にはパターン マッチングです。代入演算子の両側のパターンは同じであり、左側の変数には対応する位置の値が割り当てられます。

1.2 配列分離割り当てに失敗しました

分離された割り当てが失敗した場合、変数の値は undefined になります。サンプルコードは次のとおりです。

// 配列内の特定のインデックス値の変数が、= 演算子の右側の配列内に対応するインデックス値を持たない場合、分離割り当ては失敗し、その値は未定義になります。
[v] = []とする
[a, b] = [1]とする
console.log(v, a, b); // 未定義 1、未定義

分離割り当ての失敗の問題を解決するには、割り当て演算子の左側と右側の数値を一貫して維持する必要があります。

1.3 不完全な分離割り当て

いわゆる不完全な分離代入とは、代入演算子の右側の配列の数値が左側の配列の数値よりも大きいため、右側の配列の一部の変数が無効になることを意味しますが、この場合でも分離代入は成功します。

サンプルコードは次のとおりです。

// 代入演算子の左側の変数の数が右側の値の数より少ない let [a, b, c] = [1, 2, 3, 4] // 分離された代入は依然として成功 console.log(a, b, c); // 1 2 3

1.4 デフォルト値

割り当てを分離すると、デフォルト値を指定できます。サンプルコードは次のとおりです。

/* 
 * 分離割り当てによりデフォルト値を指定できます* 構文は次のとおりです* let [var1 = value1, var2 = value2 ,...] = [val1, val2,...]
   var1、var2は変数名を表し、value1、value2はデフォルト値を表し、val1、val2は指定された値を表します*/
[a = 1, b = 2] = [100]とします。
コンソールログ(a, b); // 100 2

デフォルト値を使用する際に注意すべき点の 1 つは、 ECMAScript6では === 演算子を使用して、指定された位置の値がundefinedと等しいかどうかを判断することです。すべてが undefined に等しい場合にのみ、デフォルト値が有効になります。

テストコードは次のとおりです。

[a = 1, b = 2] = [100, 未定義]とします
コンソールログ(a, b); // 100 2

null 値を使用する場合、 null空も意味しますが、 null !== undefined 。したがって、デフォルト値は有効になりません。

テストコードは次のとおりです。

[a = 1, b = 2] = [100, null]とします
console.log(a, b); // 100 ヌル

1.5 配列分離割り当ての複雑な状況

JavaScript弱い型付けの言語であるため、代入演算子の右側には任意の型を使用できます。その結果、次のような特殊なケースが発生します。

ケース1: 演算子の右側が関数の場合。サンプルコードは以下のとおりです。

// 1. 演算子の右側は関数です。let [a, b] = [1, function () {
  10 を返します。
}]
コンソール.log(b()); // 10

ケース2: 演算子の右側がオブジェクトの場合。サンプルコードは以下のとおりです。

// 2. 演算子の右側はオブジェクトです。let [a, b] = [1, {
  名前: 「狐鬼小仲人」
}]
console.log(b); // { name: '狐魔小仲人' }

ケース3: 演算子の右側に関数配列がある場合、サンプルコードは次のようになります。

// 3. 演算子の右側には配列が含まれます。let [a, b] = [1, [2, 3]]
console.log(b); // [ 2, 3 ]

ケース4: 演算子の両側に配列が含まれています。サンプルコードは次のとおりです。

// 4. 演算子の両側に配列が含まれます。サンプルコードは次のとおりです: let [a, [b, c]] = [1, [2, 3]]
コンソールログ(b); // 2

2. オブジェクトの分離割り当て

オブジェクトの分離された割り当ては、変数名とオブジェクトの属性名の間に 1 対 1 の対応を実現することによって実現されます。サンプルコードは次のとおりです。

/*
  * オブジェクトの分離割り当て - オブジェクトから値を抽出し、変数に値を割り当てます。変数名はオブジェクトのプロパティ名と 1 対 1 で対応している必要があります。そうでない場合は失敗します。
*/
させて {
  ×、
  ええ
} = {
  x: 10,
  年: 20
}
コンソール.log(x, y); //10 20

代入演算子の両側の形式は一貫している必要があることに注意してください。

2.1 オブジェクト分離割り当ての特殊なケース

JavaScript弱い型付けの言語であるため、代入演算子の右側には任意の型を使用できます。その結果、次のような特殊なケースが発生します。

ケース1: 演算子の右側が関数の場合。サンプルコードは以下のとおりです。

// 1. 演算子の右側は関数です。let { a, b } = {
  a: 1、
  b: 関数() {
    10 を返します。
  }
}
コンソール.log(b()); // 10

ケース2: 演算子の右側がオブジェクトの場合。サンプルコードは以下のとおりです。

// 2. 演算子の右側はオブジェクトです。let {a, b} = {
  a: 1、
  b: {
    名前: 'ywanzhou'
  }
}
console.log(b); // { 名前: 'ywanzhou' }

ケース3: 演算子の右側に関数配列がある場合、サンプルコードは次のようになります。

// 3. 演算子の右側には配列が含まれます。let {a, b} = {
  a: 1、
  b: [1, 2]
}
コンソール.log(b); //[ 1, 2 ]

ケース4: 演算子の両側にオブジェクトがあります。サンプルコードは次のとおりです。

// 4. 演算子の両辺にオブジェクトが含まれる let {
  メートル: {
    名前、
    年
  },
  ん
} = {
  メートル: {
    名前: 'テスト',
    年齢: 20
  },
  数: 20
}
console.log(name, age); // テスト 20

2.2 分離割り当ての失敗

分離された割り当てが失敗した場合、変数の値は undefined になります。サンプルコードは次のとおりです。

// 分離割り当てに失敗しました let {
  、
  b
} = {
  10 です
}
コンソールログ(b);

2.3 不完全な分離割り当て

いわゆる不完全な分離代入とは、代入演算子の右側のオブジェクトの属性の数が左側のオブジェクトの属性の数よりも大きいため、右側のオブジェクトの属性の一部の変数が無効になることを意味しますが、この場合でも分離代入は成功します。

// 不完全な分離代入 let {
  1つの
} = {
  10,
  20歳
}
コンソールにログ出力します。

2.4 デフォルト値

割り当てを分離すると、デフォルト値を指定できます。サンプルコードは次のとおりです。

// デフォルト値let {
  、
  100 です
} = {
  10,
  20歳
}
コンソールログ(b);

3. 文字列、数値、ブール値の分離割り当て

3.1 文字列分離割り当て

文字列も構造化分解できます。これは、この時点で文字列が配列のようなオブジェクトに変換されるためです。

[h1, y, x] = "一碗の周"とする
console.log(h1, y, x, h2); // 一杯の周

3.2 数値とブール値の分離割り当て

数値/ブール値に対して直接分離代入を行うと例外がスローされます。数値とブール値に対して演算を行う際、代入演算子の右側が数値またはブール値の場合は、一旦オブジェクトに変換されます。

// let [a] = 100; // TypeError: 100 is not iterable という説明の例外をスローします
// コンソールログ(a);
// ブール値または数値の割り当てを分離するには、それらをオブジェクト型に変更する必要があります。
させて {
  文字列: b
} = 1;
console.log(b === Number.prototype.toString); // 真

させて {
  文字列: c
} = 真;
console.log(c === Boolean.prototype.toString); // 真

分割代入のルールは、等号の右側の値がオブジェクトまたは配列でない限り、最初にオブジェクトに変換されるというものです。 undefinedとnullオブジェクトに変換できないため、分解して割り当てるとエラーが発生します。

4. 機能の分離割り当て

関数パラメータは、分割代入を使用して割り当てることもできます。サンプルコードは次のとおりです。

// 配列関数 f([a, b]) を使用する {
  コンソールにログ出力します。  
}
f([10, 20]) // 10 20
//オブジェクト関数fn({
  、
  b
}) {
  コンソールにログ出力します。
}
関数({
  10,
  20歳
}) // 10 20

5. 括弧の問題

分離された割り当ては便利ですが、解析するのは簡単ではありません。コンパイラーにとって、最初から数式がパターンであるか表現であるかを知る方法はありません。それを知るには、等号まで解析する (または等号まで解析しない) 必要があります。

結果として生じる問題は、パターン内に現れる括弧をどのように処理するかということです。 ECMAScript 2015ルールでは、構造化の曖昧さが生じる可能性がある場合は括弧を使用してはならないとされています。

しかし、このルールは実際には識別するのがそれほど簡単ではなく、対処するのがかなり面倒です。したがって、可能な限り、パターン内に括弧を配置しないことをお勧めします。

5.1 括弧が使えない場合

以下の3つの状況では括弧は使用できません

ケース1: 変数宣言文、サンプルコードは次のとおりです

// 以下の状況はすべてエラーになります let [(a)] = [1];

{x: (c)} = {} とします。
({x: c}) = {} とします。
{(x: c)} = {} とします。
{(x): c} = {} とします。

とします。

上記の 6 つのステートメントはすべて変数宣言ステートメントであり、パターンでは括弧を使用できないため、エラーが報告されます。

ケース2: 関数パラメータとして

関数パラメータも変数宣言と見なされるため、括弧は使用できません。

// エラー関数 f([(z)]) { return z; }
// エラー関数 f([z,(x)]) { return x; }

ケース3: 代入文のパターン

// すべてのエラー ({ p: a }) = { p: 42 };
（[a]）＝[5]；

上記のコードでは、パターン全体が括弧内に置かれ、エラーが発生します。

// エラー [({ p: a }), { x: c }] = [{}, {}];

上記のコードでは、パターンの一部が括弧内に置かれているため、エラーが発生します。

5.2 括弧が使える場合

括弧を使用できる状況は、代入文の非パターン部分のみです。

[(b)] = [3]; // 正解({ p: (d) } = {}); // 正解[(parseInt.prop)] = [3]; // 正解

上記の 3 行のステートメントはすべて正しく実行できます。その理由は、まず、これらは宣言ステートメントではなく代入ステートメントであり、次に、括弧がパターンの一部ではないためです。最初の行の文では、括弧に関係なく、配列の最初のメンバーを取得するパターンになっています。2 行目の文では、パターンは d ではなく p になっています。3 行目の文は、最初の行の文と同じ性質になっています。

6. 変数分離割り当ての有用性

変数割り当てを分離する用途は多数あります。ここでは一般的な例をいくつか示します。

6.1 変数値の交換

分離割り当てがない場合、交換変数は 3 番目の変数を使用して完了する必要があります。サンプル コードは次のとおりです。

var a = 10,
  20;

var c = a;
a = b
b = c
c = null /// 変数を解放する console.log(a, b); // 20 10

これは変数分離割り当てを利用して行われます。サンプル コードは次のとおりです。

a = 10 とすると、
  20;
[a, b] = [b, a]
コンソールログ(a, b); // 20 10

このアプローチを使用すると、簡潔になるだけでなく、読みやすく、意味も明確になります。

6.2 関数から複数の値を返す

関数は 1 つの値のみを返すことができます。複数の値を返す場合は、配列またはオブジェクトでのみ返すことができます。構造化代入を使用すると、これらの値を抽出するのが非常に便利です。

サンプルコードは次のとおりです。

// 配列を返す関数 example() {
  [1, 2, 3]を返します。
}
[a, b, c] = example() とします。

// オブジェクトを返す function example() {
  戻る {
    フード: 1,
    バー: 2
  };
}
{ foo, bar } = example() とします。

6.3 関数パラメータの定義

構造化代入を使用すると、一連のパラメータを変数名に簡単に関連付けることができます。

// パラメータは順序付けられた値のセットです。関数 f([x, y, z]) {
  コンソールにログ出力します。
}
f([1, 2, 3]); // 1 2 3

// パラメータは順序付けられていない値のセットです。関数 fn({x, y, z}) {
  コンソールにログ出力します。
}
関数({
  z: 3,
  y: 2,
  ×: 1
}); // 1 2 3

6.4 JSONデータの抽出

構造化代入は、JSON オブジェクトからデータを抽出する場合に特に便利です。

// jsonデータを抽出 let jsonData = {
  id: 42,
  ステータス: 「OK」、
  データ: [867, 5309]
};

させて {
  id、
  状態、
  データ: 数値
} = jsonデータ;

console.log(id, status, number); // 42, "OK", [867, 5309]

JS ES の新機能である分離変数割り当てに関するこの記事はこれで終わりです。分離 ES 変数の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。