非構造配分

配列またはオブジェクトの属性を分解することによって、その値をそれぞれ変数に含めるJavaScript式.すなわち,配列[]やオブジェクト{}の値を容易に取り出すことができる.

基本構文

デフォルトの割り当て

構造化されていない範囲を超える値を割り当てようとするとundefinedが返されます.

[a, b] = [10];
console.log(a); // 10
console.log(b); // undefined

var {c, d} = { c : 20};
console.log(c); // 20
console.log(d); // undefined

呼び出す変数名にデフォルト値を割り当てて、このような状況を防ぐことができます.

[a=10, b=20] = [10];
console.log(a); // 10
console.log(b); // 20

var {c = 30, d : new_name = 40} = { };
console.log(c); // 30
console.log(new_name); // 40

割り当て演算子(=)を使用して、変数名にデフォルト値を割り当てることができます.
デフォルトの割り当ては、5行目や7行目などの新しい変数名にオブジェクトを割り当てる方法でも使用できます.

配列[]で

[춘식,라이언,어피치,...남은거] = [1, 2, 3, 4, 5, 6, 7];
console.log(춘식) // 1
console.log(남은거) // [4, 5, 6, 7]

配列は、左のアイテムを呼び出す変数名セットを使用し、右のアイテムを割り当てる値として使用します.
左岸の各要素に同じインデックスを持つ配列値を指定し、「展開演算子」(Spread Operator)を使用して左岸で指定されていない残りの値を使用します.
Spread Operatorを使用して変数を入力するか、左、右の属性が異なる場合はエラーが発生します.

オブジェクト{}内

const {춘식,라이언,어피치,...남은거} = { 나이:1, 나이:2, 나이:3, 나이:4, 나이:5, 나이:6, 나이:7};
console.log(춘식) // 나이:1
console.log(남은거) // {나이:4, 나이:5, 나이:6, 나이:7}

オブジェクトの場合、右項目のキー値は左項目の変数名と一致します.
オブジェクトが構造化されていない変数宣言の宣言(var、let、const)がない場合は、カッコで囲む必要があります.

({춘식,라이언,어피치,...남은거} = { 나이:1, 나이:2, 나이:3, 나이:4, 나이:5, 나이:6, 나이:7});
console.log(춘식) // 나이:1
console.log(남은거) // {나이:4, 나이:5, 나이:6, 나이:7}

Spread Operatorによるレプリケーション

配列とオブジェクトを深くコピーするには、展開演算子を使用します.

var arr = [1,2,3];
var copy1 = arr;
var [...copy2] = arr;
var copy3 = [...arr];

arr[0] = 'String';
console.log(arr); // [ 'String', 2, 3 ]
console.log(copy1); // [ 'String', 2, 3 ]
console.log(copy2); // [ 1, 2, 3 ]
console.log(copy3); // [ 1, 2, 3 ]

「浅いコピー」「コピー1」(copy 1)はarrを参照するために0要素変更されましたが、展開演算子の「コピー2」と「copy 3」(copy 3)を使用すると、深くコピーされていることがわかります.
オブジェクトは、デプスコピーを展開演算子として使用することもできます.
最も重要なのは、コピーと同時に新しい値を指定できることです.

var prevState = {
  name: "yuddomack",
  birth: "1996-11-01",
  age: 22
};

var state = {
  ...prevState,
  age: 23
};

console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }

上のように...prevStateを使用すると、既存のオブジェクトをコピーしながらageキーに新しい値(23)を指定できます.
反応器のpropsやstateなど、以前の情報を使用している場合は、非常に役立ちます.

関数＃カンスウ＃

また、非構造化割り当ては、関数のパラメータセクションで使用することもできます.
これらの構文は、API応答値の処理に特に適している.

function renderUser({name, age, addr}){
  console.log(name);
  console.log(age);
  console.log(addr);
}

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map((user) => {
  renderUser(user);
});

同様にmap関数のパラメータにも直接使用できます.

const users = [
  {name: 'kim', age: 10, addr:'kor'},
  {name: 'joe', age: 20, addr:'usa'},
  {name: 'miko', age: 30, addr:'jp'}
];

users.map(({name, age, addr}) => {
  console.log(name);
  console.log(age);
  console.log(addr);
});

ネスト関数、配列の非構造化

const kim = {
  name: '춘식',
  age: 1,
  addr: 'ko',
  friends: [
    {name: '라이언', age: 2, addr:'usa'},
    {name: '어피치', age: 3, addr:'jp'}
  ]
};

var { name: userName, friends: [ ,{ name: jpFriend }] } = kim;
console.log(userName); // 춘식
console.log(jpFriend); // 어피치

リファレンス

https://learnjs.vlpt.us/basics/06-object.html#%EA%B0%9D%EC%B2%B4-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9
https://learnjs.vlpt.us/useful/06-destructuring.html
https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EB%B2%95-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9