JS ES6 変数分割代入の詳細な説明

JS ES6 変数分割代入の詳細な説明

1. 脱構築とは何か?

ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。これを構造化分解と呼びます。 ES5 が提供するものよりも簡潔でコンパクト、かつ明確な構文です。記述するコードの量が減るだけでなく、コードの書き方も根本的に変わります。

2. 配列の分割

以前は、変数に値を割り当てるには、次のように値を直接指定するしかありませんでした。

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

配列の分割代入を使って値を割り当てることができるようになりました

[a, b, c] = [1, 2, 3]とします。
console.log(a, b, c); // 1, 2, 3

これは最も基本的な配列分解の使用方法ですが、オブジェクト配列を分解することもできます。

// オブジェクト配列の分解 let [a, b, c] = [{name: 'jacky'}, {name: 'monkey'}, {name: 'houge'}];
console.log(a, b, c); // {name: 'jacky'}, {name: 'monkey'}, {name: 'houge'}

3. 配列モードと代入モードの統一

これは、等号の左側と右側の形式が統一されている必要があると理解できます。統一されていない場合、分解は失敗します。

[a, [b, c], d] = [1, [2, 3], 4]とします。
コンソール.log(a, b, c, d); // 1 2 3 4

 // 2番目と3番目を除くすべての値を抽出します。let [a, , , d] = [1, 2, 3, 4];
コンソールログ(a, d); //1 4
    
[a, ...b] = [1, 2, 3, 4]とします。
console.log(a, b); // 1 [2, 3, 4]
        
[a, , , ...d] = [1, 2, 3, 4, 5]とします。
console.log(a, d); // 1 [4, 5]
分解が失敗した場合、変数の値は未定義になります。

[a, b, c] = [2, 3]とします。
console.log(a, b, c); // 2 3 未定義

[c] = [] とします。
console.log(c); // 未定義

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

[a, b, c] = [2, 3]とします。
console.log(a, b, c); // 2 3 未定義

[c] = [] とします。
console.log(c); // 未定義

上記は完全な分解の例です。不完全な分解、つまり等号の左側のパターンが等号の右側の配列の一部とのみ一致する場合でも、分解は成功します。

[x, y] = [1, 2, 3]とします。 
コンソール.log(x, y); // 1 2

[a, [b], d] = [1, [2, 3], 4]とします。
コンソール.log(a, b, d); // 1 2 4

4. デフォルト値の構造化解除

構造化代入によりデフォルト値を指定できます。

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

[a=1, b=2, c, d=13] = [10, 11, 12]とします。
コンソール.log(a, b, c, d); // 10 11 12 13

5. オブジェクト分解の割り当て

オブジェクトの分割は、配列の分割とは 1 つの重要な点で異なります。配列の要素は順番に配置され、変数の値は位置によって決まります。ただし、オブジェクトのプロパティには順序がなく、正しい値を取得するには変数の名前がプロパティと同じである必要があります。

// オブジェクト分解割り当ての内部メカニズムは、最初に同じ名前の属性を見つけて、それを対応する変数に割り当てることです。実際に割り当てられるのは前者ではなく後者です。
obj = { a: "aaa"、b: "bbb" } とします。
{a: x, b: y } = obj とします。 
console.log(x, y); // aaa bbb

{a, b} = {a: 'aaa', b: 'bbb'} とします。
console.log(a, b); // aaa bbb

// 順序が違います let { b, a } = { a: 'test1', b: 'test2' }
console.log(a, b) // テスト1 テスト2


// ネストされた分割代入 let { obj: { name }} = { obj: { name: 'jacky', age: '22' } }
console.log(名前) // ジャッキー

// 少し複雑なネスト let obj = {
    p: [
        'こんにちは'、
        { y: 'ワールド' }
    ]
};

{p: [x, {y}] } = objとします。
console.log(x, y); // こんにちは世界

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

var { foo: 名前を変更 } = { foo: "aaa"、bar: "bbb" };
console.log(名前変更); // aaa
console.log(foo); // キャッチされない ReferenceError: foo は定義されていません

変数が構造化分解の前に定義されている場合、この時点で構造化分解に問題が発生します。次のコードは正しくないため、コンパイル時にエラーが報告されます (js エンジンは {a} をコード ブロックとして認識し、構文エラーが発生するためです。この問題は、行の先頭に中括弧を記述せずに、js がコード ブロックとして解釈しないようにすることでのみ解決できます)

させる;
obj = { a: "aaa" } とします。
{a} = obj; // キャッチされない構文エラー: 予期しないトークン '='

エラーを解決してプログラムを正しく動作させるには、分解ステートメントの外側に括弧を追加するだけです。

させる;
obj = { a: "aaa" } とします。
( {a} = オブジェクト);
console.log(a); // aaa

6. 関数パラメータ

関数パラメータは、分割代入を使用して割り当てることもできます。

関数add([x, y]){
  x + y を返します。
}

追加([1, 2]); // 3

関数パラメータの構造化解除ではデフォルト値も使用できます。

関数fn(x, y = 7) {
    x + y を返します。
}
コンソール.log(fn(3)); // 10

7. 文字列の構造化解除

文字列は配列のようなオブジェクトに変換されます。

const [a, b, c, d, e, f] = "こんにちは";
コンソール.log(a); //h
コンソールログ(b); //e
コンソール.log(c); //l
console.log(d); //l
console.log(e); //o
console.log(f); //未定義

8. 数値とブール値の分解代入

値を分解して割り当てるときに、等号の右側が数値またはブール値である場合は、まずオブジェクトに変換されます。

toString: s を 0 とします。
console.log(s === Number.prototype.toString); // 真

toString: s を true にします。
console.log(s === Boolean.prototype.toString); // 真

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

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // 型エラー

9. 分割割り当ての適用

1. 変数の値を入れ替える

2つの変数を交換する通常の方法では、次のように追加の一時変数が必要になります。

a = 1 とします。
b = 2 とします。
温度を調節する

温度 = ;
a = b;
b = 温度;

コンソールログ(a, b); // 2 1

ES6の構造化代入を使用すると、非常に簡潔になります

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

コンソールログ(a, b); // 2 1

2. 関数から複数の値を返す

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

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

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

3. 配列内の要素にアクセスする

配列(空の場合もある)が存在するなどのシナリオがあります。配列の最初、2 番目、または n 番目の項目にアクセスしますが、項目が存在しない場合は、指定されたデフォルト値を使用します。

通常、配列の長さプロパティは、

定数リスト = [];

firstItem を 'hello' にします。
リストの長さが0より大きい場合
    最初の項目 = リスト[0];
}

console.log(firstItem); // こんにちは

ES6の構造化代入を使用して上記のロジックを実装する場合

定数リスト = [];
const [firstItem = 'hello'] = リスト;

console.log(firstItem); // 'こんにちは'

4. JSONデータを抽出する

jsonData = {
  id: 42,
  ステータス: 「OK」、
  データ: [867, 5309]
};

{id、ステータス、データ:数値} = jsonData;

console.log(ID、ステータス、番号);
// 42, "OK", [867, 5309]

5. マップ構造のトラバース

Iterator インターフェースを実装するオブジェクトは、for...of ループを使用して走査できます。 Map構造はIteratorインターフェースをネイティブにサポートしており、変数分解割り当てを組み合わせることでキー名とキー値を取得するのに非常に便利です。

定数マップ = 新しい Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [キー, 値] of map) {
  console.log(キー + " is " + 値);
}
// 最初はhello
// 2番目は世界

キー名のみを取得したい場合、またはキー値のみを取得したい場合は、次のように記述できます。

// キー名を取得する for (let [key] of map) {
  // ...
}

// キー値を取得する for (let [,value] of map) {
  // ...
}

以上がJS ES6変数の分解割り当ての詳細な説明です。JS ES6変数の分解割り当ての詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • ES6 における JavaScript 分割代入の一般的な使用法の概要
  • JavaScript の構造化代入を理解するのに役立つ記事
  • JavaScript 構造化分解割り当ての実践ガイド
  • JavaScript 構造化代入の詳細な説明
  • JS ES の新機能、変数分離割り当て
  • JavaScript の構造化代入の一般的なシナリオと例 5 つ
  • js における浅いコピーと深いコピーの詳細な説明
  • JavaScript の割り当て、浅いコピーと深いコピーの違い

<<:  MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック

>>:  Confluence と jira-software を Docker にデプロイする方法

推薦する

MySql テーブル内の行を削除する実用的な方法

まず、どのフィールドまたはフィールドの組み合わせがデータ行を一意に識別できるかを決定する必要がありま...

Nginx 正規表現関連のパラメータとルールの紹介

序文最近、私はクライアントのサーバー構成を支援しており、Nginx 構成ファイルを頻繁に変更していま...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?

ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...

4種類のMySQL接続とマルチテーブルクエリの詳細な説明

目次MySQL 内部結合、左結合、右結合、外部結合、複数テーブルクエリビルド環境: 1. 内なる慈恩...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 2)

上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

Linux における mv コマンドの高度な使用例

序文mv コマンドは、move の略語で、ファイルを移動したり、ファイル名を変更したり (ファイルの...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

nginx の 2 つのモジュールの proxy_pass の違い

1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...

ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント

ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...

MySQL トランザクション分離はどのように実現されますか?

目次同時シナリオ書き込む読む読む読み取り-書き込みと書き込み-読み取りMySQL のロック行レベルロ...

docker インストール後に hello-world を実行する問題を解決する

yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...

Tomcatソースコードをideaにインポートする方法

目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...