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 挿入の問題

推薦する

ウェブページ上の小さなスペースに大きな画像を配置する方法

出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...

モバイルウェブサイトの開発に関するいくつかの結論

ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。 1. ページの適用性の問題:...

MySQLトリガーの概念、原理、使用法の詳細な説明

この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...

テーブルを開く際のMySQLスレッドの問題の解決方法

問題の説明最近、MySQL5.6.21サーバーがありました。アプリケーションがリリースされた後、同時...

HTML で中国語を UTF-8 に変換する方法

HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...

Tomcat サービスに Java 起動コマンドを追加する方法

私の最初のサーバープログラム現在、オンラインゲームの書き方を学んでいるので、サーバーサイドのプログラ...

mysql の追加、削除、変更、クエリの基本ステートメント

文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...

uni-appのスタイルの詳細な説明

目次uni-app のスタイル要約するuni-app のスタイルsassプラグインは公式ウェブサイト...

Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...

Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義

1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...

10分でCSS3グリッドレイアウトを理解する

基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...