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

以下もご興味があるかもしれません: