構造分解の割り当て

1.分配アレイ構造分解

構造配列を1つ以上の変数に分解する方法は、次のとおりです.

const arr = [1,2,3];
const [a,b,c] = arr;
a // 1
b // 2
c // 3

右に可愛い子を配らないと間違います.
宣言と割り当てを別々にすることもできますが、この場合はletを使用することをお勧めします.constは재할당이 불가능だからです.

let [x,y]
[x,y] = [1,2]

構造分解割当の基準は、配列された要素の順序、すなわちインデックスであり、順序で割り当てられます.このとき変数の個数と要素の個数は반드시 일치할 필요는 없다である.要素が変数より多ければいい.

const arr = [1,2,3,4,5,6]
cosnt [a,b,c,d] = arr
a // 1
b // 2
c // 3
d // 4

3番目の要素には宣言されていない変数、건너뛸 수 있다

const arr = [1,2,3,4,5,6]
cosnt [a,b,,d] = arr
a // 1
b // 2
d // 4

...rest要素を使用すると、1番目と2番目の宣言変数を除く나머지 모두를配列が受信されます.rest要素は마지막에 위치해야でなければなりません.

const arr = [1,2,3,4,5,6]
cosnt [a,b,...c] = arr
a // 1
b // 2
c // [3,4,5,6]

変数は초기값을 설정할 수 있다です.ただし、変数に値を付与すると、初期値より할당값이 우선순위高く、할당값이 출력된다となる.

const arr = [1,2,3,4,5,6]
cosnt [a,b,c=4] = arr
a // 1
b // 2
c // 3 => 초기값이 4가 이미 있지만 할당값으로 3이 들어왔기 때문에 출력값은 3이 된다.

2.オブジェクト構造分解の割り当て

オブジェクト構造分解配分とアレイ構造分解配分には大きな違いはありません.
オブジェクトの各プロパティをオブジェクトから構造に分解して変数に割り当てるには、프로퍼티 키를 사용を使用する必要があります.

const user = {firstname: "hyungwon", lastname: "jang"}
const {firstname, lastname} = user
firstname // hyugwon
lastname // jang

=>このとき、オブジェクト構造分解割り当ては、変数名を元のオブジェクト다르게 할 수 없다と異なる.

const user = {firstname: "hyungwon", lastname: "jang"}
const {first, last} = user
first// undefined
last // undefined

他の変数に保存したい場合は、このようにします.

const user = {firstname: "hyungwon", lastname: "jang"}
const {firstname:first, lastname: last} = user
first // hyungwon
last // jang

オブジェクト構造分解割当も変数기본값을 설정할 수 있고であり、割当値があれば할당값이 우선である.

const user = {firstname: "hyungwon", lastname: "jang"}
const {firstname:first="chulsoo", lastname: last} = user
first // hyungwon => 기본값인 chulsoo가 있지만 할당값이 hyungwon이기에 hyungwon으로 출력한다.
last // jang

要素をオブジェクトの変数として抽出します.

const todo = {id:1, content:"html", done:true}
const {id, content, done} = todo
id // 1
content // "html"
done // true

他の名前の変数にも含める場合は、このようにできます.

const todo = {id:1, content:"html", done:true}
const {id:key, content:what, done:complete} = todo
key // 1
what // "html"
complete // true

複数の配列オブジェクトから必要な要素を抽出します.

const todo = [
    {id:1, content:"html", done:true},
    {id:2, content:"css", done:true},
    {id:3, content:"javascript", done:false},
    {id:4, content:"React", done:false},
    {id:5, content:"React-native", done:false}
]

const [,,{content},{id:key},{done}] = todo
=> 첫번째와 두번째는 변수가 없으니 넘어가고
세 번째 객체의 content값과 네 번째 객체의 id값(key값)과 다섯 번째 객체의 done값을 가져올 수 있다.

オブジェクト内のオブジェクト要素を受信することもできます.

const todo = {
    id:1,
    content:{
        name:"React",
        level: "hard"
    }, 
    done:true
}

const {content:{name}} = todo
name // React

オブジェクト構造分解割り当ては、配列のようにrest要素を使用することもできます.항상 마지막에でなければなりません.

const obj = {id:1, content:"jv", level:"hard", done:true"}
const {id, ...rest}
id // 1
rest // { content: 'jv', level: 'hard', done: true }