配列分割代入[a, b, c] = [1, 2, 3]とする 複数の変数を同時に定義します。a は 1 に一致し、b は 2 に一致し、c は 3 に一致します。 分割代入ではデフォルト値を指定できます。つまり、左側の変数にデフォルト値が指定されていて、右側に対応する値がない場合、デフォルト値が最初に出力されます。 [x, y = 'b'] = ['a'] とします // x = 'a'、y = 'b' x は文字 a に一致し、y のデフォルト値は文字 b です。右側に対応する文字がない場合、デフォルトの出力は文字 b になります。 オブジェクトの分解代入分解は配列だけでなく、オブジェクトにも使用できます。オブジェクトの分解と配列の分解には重要な違いがあります。配列の要素は順番に配置され、変数の値は位置によって決まりますが、オブジェクトのプロパティには順序がなく、正しい値を取得するには変数の名前がプロパティと同じである必要があります。 させて { 名前、 年、 趣味: [1つ、2つ] } = { 名前: 「シラマシロ」 年齢: 21, 趣味: ['サイクリング', 'アニメーション'] } たとえば、age の値を abc の値に変更すると、オブジェクト内のプロパティ名に対応していないため、対応する値を割り当てることができず、未定義になります。 分割割り当ての適用変数の値の交換変数の値を交換する通常の考え方 x = 1とすると、 y = 2, 温度 = 0 温度 = x // x = 1 = 温度 x = y // y = 2 = x y = 温度 // 温度 = 1 = y コンソールログ('x => ', x) コンソールログ('y => ', y) 分割代入による変数の交換 x = 1 とします。 y = 2とします。 y = 0; コンソールログ('x => ', x) コンソールログ('y => ', y) 変数 x と y の値を交換するこの方法は、簡潔であるだけでなく、読みやすく、非常に明確なセマンティクスを備えています。 関数から複数の値を返す関数は 1 つの値しか返せません。複数の値を返したい場合は、配列またはオブジェクトでのみ返せます。分割代入を使用すると、さらに便利になります。 趣味配列の2番目の値を抽出する 関数 getArray() { 戻る { 名前: 'コンサム', 年齢: 21, 趣味: ['サイクリング'、'アニメ'、'バドミントン'] } } console.log(getArray().name + 'like' + getArray().hobbies[1]) // アニメ 趣味配列の2番目の値を取得するには、分割代入を使用します。 {名前、年齢、趣味} = getArray() とします。 console.log(name + 'like' + 趣味[1]) // アニメ マップ構造のトラバースfor...of ループのトラバーサルでは、トラバースされた値は配列であり、分解割り当ては配列に対して「パターン マッチング」できるため、キー値をすばやく抽出できます。 キー値を取得するために、構造化代入を伴う for...of ループトラバーサルを使用すると非常に便利です。 for (let [キー, 値] of map) { console.log("キー => ", キー) console.log("値 => ", 値) } 関数パラメータの分割代入// { x = 10, y = 5 } = {} とします 関数 f({ x = 10, y = 5 } = {}) { [x, y]を返す } console.log(f({ x: 100, y: 50 })) // [100, 50] console.log(f({ x: 3 })) // [3, 5] コンソール.log(f({})) // [10, 5] コンソール.log(f()) // [10, 5] 関数のパラメータにオブジェクトを渡し、渡されたオブジェクトのデフォルト値を設定できます。それを関数に分解して使用するので、このように理解することができます。 関数 f(x = 10, y = 5) { [x, y]を返す } console.log(f(100, 50)) // [100, 50] コンソール.log(f(3)) // [3, 5] コンソール.log(f()) // [10, 5] 書き方が異なれば結果も異なります。 関数 f({ x, y } = { x: 10, y: 5 }) { [x, y]を返す } console.log(f({ x: 100, y: 50 })) // [100, 50] console.log(f({ x: 3 })) // [3, 未定義] console.log(f({})) // [未定義、未定義] コンソール.log(f()) // [10, 5] 渡された x または y がオブジェクト プロパティの値に対応せず、一致が失敗するため、3 番目と 4 番目の出力は undefined になります。 上記は、ES6 分割代入の原理と応用の詳細な内容です。ES6 分割代入の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明
目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...
CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...
序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...
初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...
この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...
エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...
この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...
<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...
目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
目次概要同一生成元ポリシー (SOP)相同制限クロスドメインをバイパスクロスサイトリクエストフォージ...
1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...