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 にデプロイする方法

推薦する

4つのファイル拡張子 .html、.htm、.shtml、.shtm の違い

ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...

MySQL 半同期レプリケーションの原理構成と導入の詳細な説明

環境の紹介: Ubuntu Server 16.04.2+MySQL 5.7.17 コミュニティ サ...

誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装

実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル

Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...

Linux rpm および yum コマンドとその使用法の詳細な説明

RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...

JSは要素のドラッグとプレースホルダー機能を実装します

このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後...

Nginx で limit_req_zone を使用して同じ IP へのアクセスを制限する方法

Nginx は、ngx_http_limit_req_module モジュールの limit_req...

Dockerの高可用性構成の詳細な説明

Docker の作成Docker Compose は、管理対象コンテナをプロジェクト、サービス、コン...

Javascript 構造化代入の詳細

目次1. 配列の分解2. オブジェクトの分解3. 不完全な解体4. 分割代入を使用して変数交換を実装...

CentOS7でXShellとネットワーク設定を接続する方法

1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...