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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MYSQL クエリの効率を向上させる 10 の SQL ステートメント最適化テクニック
>>: Confluence と jira-software を Docker にデプロイする方法
ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...
普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...
目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...
目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...
環境の紹介: Ubuntu Server 16.04.2+MySQL 5.7.17 コミュニティ サ...
実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...
RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...
このブログ投稿は、ブロガーが数日前に取り組んだプロジェクトで遭遇した困難についてです。これを学んだ後...
Nginx は、ngx_http_limit_req_module モジュールの limit_req...
Docker の作成Docker Compose は、管理対象コンテナをプロジェクト、サービス、コン...
目次1. 配列の分解2. オブジェクトの分解3. 不完全な解体4. 分割代入を使用して変数交換を実装...
1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...