割り当て[JSSInfo]構造分解

オブジェクトと配列はJavaScriptで最も一般的なデータ構造です.
複数の鍵付きデータを格納する場合は、オブジェクトを格納できます.
データを順番に格納するときに配列を使用します.
場合によっては、すべてのデータではなく、オブジェクトまたは配列に格納されているデータのほんの一部しか必要としない場合があります.構造分解割当(Destructuring Assignment)は、オブジェクトまたは配列を分解するのに役立つ構文です.関数のパラメータが多い場合や、パラメータのデフォルト値が必要な場合は、構造分解がその価値を発揮します.

アレイの分解

let arr = ["KJ", "SJ"]

let [firstName, secondName] = arr;

console.log(firstName); // KJ 출력
console.log(secondName); // SJ 출력

「分解」(Destructuring)は「破壊」(Destructive)を表しません。

分解構造割り当てとは、コピー後に変数に分解することです.分解ターゲットは変更または破壊されません.

カンマで要素を上書きできます。

カンマを使用する場合は、要素を無視して次の要素にジャンプします.(省略と考えられます.)

let [firstName, , title] = ["KJ", "SJ", "SH", "KO"];

console.log(title); // SH를 출력합니다. 두 번 째 값 SJ를 생략하고 넘어갑니다.

割当て演算子の右側にはすべてのiterableがあります。

構造分解割り当てはiterableに適用できます.

let[a, b, c] = "abc"; // ["a", "b", "c"]
let[one, two, three] = new Set([1, 2, 3]);

割当て演算子の左側には、任意の内容があります。

let user = {};
[user.name, user.lastName] = "KJ Lee".split(' ');

console.log(user.name); // KJ 출력

.entries()を使用して構造を分解する

キーと値を循環分解して変数に割り当てることができます.

let user = {
	name: "KJ",
    age: 31
};

for(let [key, value] of Object.entries(user)){
	console.log(`${key}: ${value}`);
} // name: KJ, age: 31 이 출력됩니다.

...残りの要素をインポート

配列の前に必要な要素を除外し、残りの値セットを1つの場所に保存する場合は...使えばいい...残りの要素は貼り付けられたパラメータに保存できます.

let [name1, name2, ...rest] = ["KJ', "SJ", "SH", "KO", "NO"];

console.log(name1); // KJ 출력
console.log(name2); // SJ 출력

// 여기 밑에서부터는 ...rest 영역이기에 잘 봐야한다.
console.log(rest[0]); // SH 출력
console.log(rest[1]); // KO 출력
console.log(rest.length); // 3 출력

...restは、残りの配列要素が格納された新しい配列を作成します.(もちろんrestの代わりに使用できます.)でも….最後の変数で使用する必要があります.

構造分解では、割り当てられたデフォルト値はUndefinedです。

let [firstName, secondName] = [];

console.log(firstName); // undefined;
console.log(secondName); // undefined;

オブジェクトの分解

構造分解割り当てにより、オブジェクトを分解することもできます.
ex)タグとしてオブジェクトキーリストを使用する構文

let options = {
	title: "Menu",
    width: 100,
    height: 300
};

let{title, width, height} = options;

console.log(title); // Menu 출력
console.log(width); // 100 출력
console.log(height); // 300 출력

順序はオブジェクトにとって重要ではありません.対応する変数に基づいて操作します.

使用シヨウ:(コロン)ターゲット変数の設定ターゲット変数ノセッテイ

let options = {
	title: "Menu",
    width: 100,
    height: 300
};

let{width: w, height: h, title} = options;
console.log(title); // Menu 출력
console.log(w); // 100 출력
console.log(h); // 300 출력

:(コロン)ダッシュ=(割当て演算子)が使用可能です.

...割当てオブジェクトの使用

let options = {
	title: "Menu",
    width: 100,
    height: 300
};

let{title, ...rest} = options;

console.log(title); // Menu 출력
console.log(rest.width); // 100 출력
console.log(rest.height); // 300 출력

{}={}配分上の注意事項

ex)エラー例

let title, width, height;
{title, width, height} = {title: "Menu", width: 200, height: 100};

{...} 単一のブロックとして認識できません.
したがって、{}={}を使用するには、それをバンドル()する必要があります.
ex)良好な使用例

let title, width, height;

({title, width, height} = {title: "Menu", width: 200, height: 100});

console.log(title); // Menu 출력

ぶんかいオーバーラップこうぞう

オブジェクトまたは配列に他のオブジェクトまたは配列が含まれている場合は、複雑なモードを使用してネストされた配列またはオブジェクトから情報を抽出できます.これをネスト構造分解(nested destructuring)と呼ぶ.
分解するオブジェクトが設定されていない場合は、デフォルト値が使用されます.(既定は個別に設定されています.)

スマートな関数パラメータ

関数には多くのパラメータがありますが、多くのパラメータはオプションです.
ex)コールバック関数

function showMenu(title = "Untitled", width = 200, height = 100, items = []){
	//
}

関数を作成するときに、渡されたパラメータの順序が正しくない場合、問題が発生する可能性があります.
しかし,構造分解では,すべてのパラメータが収集され,関数に伝達される.入力したオブジェクトを分解して変数に割り当て、必要な操作を実行できます.
ex)関数に渡すオブジェクトと変数に渡すオブジェクトを分解して変数に割り当てる例

let options = {
	title: "My menu",
    items: ["Item1", "Item2"]
};

function showMenu({title = "Untitled", width = 200, height = 100, items = []}){
	console.log(`${title} ${width} ${height}`);
    console.log(items);
}

showMenu(options);
// My menu 200 100 출력
// Item1, Item2 출력

ネストされたオブジェクトとコロンを組み合わせると、複雑な構造が簡略化されます。

ハイフン(width:h=100など)を使用すると、複雑な構造を簡略化できます.

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  
  height: h = 200, ,
  items: [item1, item2]
}) {
  alert( `${title} ${w} ${h}` );
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);
// My menu, 100, 200 출력
// Item1 출력
// Item2 출력

n/a.結論

構造分解割り当てでは、オブジェクトまたは配列を変数として関連付けることができます.
何を言っているのか全然分からないので...また後で.