ES6分解課題の原理と応用

ES6分解課題の原理と応用

配列分割代入

[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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JS ES6 変数分割代入の詳細な説明
  • ES6 の let と const の違いと変数分解代入演算法の例題解析
  • ES6 配列とオブジェクトの分割代入の詳細な説明
  • ES6 のエクスポート デフォルトおよびインポート ステートメントにおける分割代入の詳細な説明
  • ES6 分割代入の例の詳細な説明
  • ES6 知識ポイントのまとめ: オブジェクト分割代入の応用例
  • ES6入門チュートリアル: 変数分割代入の詳細な説明
  • ES6 分割代入の基本
  • ES6 オブジェクトの新しい関数と分割代入の紹介
  • ES6 分割代入の機能と使用例の分析
  • ES6 分割代入の例の詳細な説明

<<:  Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

>>:  MySQL の JSON 挿入の問題

推薦する

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...

Windows 10にOdoo12開発環境をインストールする方法

序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

mysql data_dirの変更によって発生するエラー問題を解決する

今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...

Vue 実践における実用的な小さな魔法のまとめ

初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...

検証コードケースのjs実装

この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

MYSQL 演算子の概要

目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...

docker.service 起動エラーの詳細なトラブルシューティング

エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

ウェブページのアクセス速度に関する主な問題と解決策

<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...

Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション

目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

JSホモロジー戦略とCSRFの詳細な説明

目次概要同一生成元ポリシー (SOP)相同制限クロスドメインをバイパスクロスサイトリクエストフォージ...

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...