ES6의 객체 분해

이것은 나의 이전 문장의 후속 문장이다.네가 해체할 생각이 없다면, 너는 그것을 읽어야 한다.
우선 왜 대상에 대한 분해가 필요한지 살펴보자.우리는 대상에서 데이터를 추출하여 새로운 변수에 분배하고 싶다.ES6 이전에는 어떻게 해야 할까요?

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var name = person.name;
    var country = person.country;
    var job = person.job;

    console.log(name);//"Sarah"
    console.log(country);//"Nigeria"
    console.log(job);//Developer"

이런 데이터를 추출하는 것이 얼마나 지루한지 봐라.우리는 반드시 같은 일을 반복해서 해야 한다.ES6는 시간을 절약하기 위해 해체 기능을 제공합니다.우리 바로 시작합시다.
ES6로 위의 예를 반복해 보겠습니다.우리는 데이터를 하나하나 분배하는 것이 아니라 왼쪽의 대상을 사용하여 추출할 수 있다.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name, country, job} = person;

    console.log(name);//"Sarah"
    console.log(country);//"Nigeria"
    console.log(job);//Developer"

너는 같은 결과를 얻을 것이다.선언되지 않은 객체에 변수를 지정하는 것도 유효합니다.

    var {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};

    console.log(name);//"Sarah"
    console.log(country);//"Nigeria"
    console.log(job);//Developer"

값을 지정하기 전에 설명한 변수
먼저 객체의 변수를 선언한 다음 분해할 수 있습니다.한번 해보자.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"}; 
    var name, country, job;

    {name, country, job} = person;

    console.log(name);// Error : "Unexpected token ="

기다린다!!방금 무슨 일이 있었어요?아, 우리는 꽃괄호 앞에 ()를 붙이는 것을 잊어버렸다.
성명이 없는 대상 문자를 사용하여 값을 해설할 때, 값 문장을 둘러싼 ( ) 문법은 필수적이다.왼쪽{}이 객체 문자가 아닌 블록으로 처리되기 때문입니다.지금부터 시작합시다.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};
    var name, country, job;

    ({name, country, job} = person);

    console.log(name);//"Sarah"
    console.log(job);//"Developer"

또 주의해야 할 것은 이런 문법을 사용할 때() 앞에 분호가 있어야 한다는 것이다.그렇지 않으면 이전 줄의 함수를 실행하는 데 사용할 수 있습니다.
왼쪽 객체의 변수는 객체의 속성 키person와 동일한 이름을 가져야 합니다.이름이 다르면 우리는 얻을 수 있다undefined.이거 봐.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name, friends, job} = person;

    console.log(name);//"Sarah"
    console.log(friends);//undefined

만약 우리가 새로운 변수 이름을 사용하고 싶다면...우리는 할 수 있다.
새 변수 이름 사용
만약 우리가 속성의 이름을 사용하지 않고 대상의 값을 새로운 변수에 부여하고 싶다면, 우리는 이렇게 할 것이다.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name: foo, job: bar} = person;

    console.log(foo);//"Sarah"
    console.log(bar);//"Developer"

따라서 추출된 값은 새로운 변수foo와 bar에 전달된다.
기본값 사용
기본값은 데이터를 추출할 객체에 변수undefined가 있는 것을 방지하기 위해 객체 분해에도 사용할 수 있습니다.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name = "myName", friend = "Annie"} = person;

    console.log(name);//"Sarah"
    console.log(friend);//"Annie"

따라서 값이 정의되지 않은 경우 변수는 에서 추출한 값name과 같이 객체에 저장됩니다.이 밖에 기본값을 사용했습니다. friend 와 같습니다.
새 변수에 값을 부여할 때 기본값을 설정할 수도 있습니다.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer"};

    var {name:foo = "myName", friend: bar = "Annie"} = person;

    console.log(foo);//"Sarah"
    console.log(bar);//"Annie"

그래서 name에서 person를 추출하여 서로 다른 변수에 분배한다.한편, friend는 undefined에서 person였기 때문에 새로운 변수bar는 기본값이 분배되었다.
계산 속성 이름
Computed property name은 다른 객체의 문자 특성이며 구문 분석에 사용할 수도 있습니다.네모난 괄호 안에 놓으면 표현식으로 속성의 이름을 지정할 수 있습니다.

    var prop = "name";

    var {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};

    console.log(foo);//"Sarah"

수조와 대상을 결합하다
배열은 객체 분해의 객체에도 사용할 수 있습니다.다음은 하나의 예를 제시했다.

    var person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};

    var {name:foo, friends: bar} = person;

    console.log(foo);//"Sarah"
    console.log(bar);//["Annie", "Becky"]

객체 분해의 중첩
구조를 분해할 때 객체를 내포할 수도 있습니다.

    var person = {
        name: "Sarah",
        place: {
            country: "Nigeria", 
            city: "Lagos" }, 
        friends : ["Annie", "Becky"]
        };

    var {name:foo,
         place: {
             country : bar,
             city : x}
          } = person;

    console.log(foo);//"Sarah"
    console.log(bar);//"Nigeria"

객체 분해 중지
rest 문법은 아직 추출되지 않은 속성 키를 추출하는 데 사용할 수 있습니다.키와 해당 값이 새 객체에 복사됩니다.아래의 예를 보아라.

    var person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};

    var {name, friends, ...others} = person;

    console.log(name);//"Sarah"
    console.log(friends);//["Annie", "Becky"]
    console.log(others);// {country: "Nigeria", job: "Developer"}

여기서 키가 변수 이름에 속하지 않는 나머지 속성은 변수에 분배된 위치를 보여 줍니다. others여기 남은 문법은 ...others입니다.others 원하는 변수로 이름을 바꿀 수 있습니다.
마지막으로 함수에서 대상을 어떻게 사용하는지 보여 줍니다.
객체 분해 및 함수
객체 분해는 함수에 매개변수를 지정하는 데 사용할 수 있습니다.우리는 예를 들 수 있다.

    function person({name: x, job: y} = {}) {
        console.log(x);
    }

    person({name: "Michelle"});//"Michelle"
    person();//undefined
    person(friend);//Error : friend is not defined

파라메터스 대상의 오른쪽{}을 주의하세요.그것은 우리로 하여금 매개 변수를 전달하지 않는 상황에서 함수를 호출할 수 있게 한다.이것이 바로 우리가 얻은 이유undefined다.만약 우리가 그것을 삭제한다면 오류 메시지를 받을 것이다.
우리는 또한 매개 변수에 기본값을 지정할 수 있다.

    function person({name: x = "Sarah", job: y = "Developer"} = {}) {
        console.log(x);
    }

    person({name});//"Sarah"

위의 예에서 보듯이 우리는 대상을 해체하여 많은 일을 할 수 있다.
질문이나 보충이 있습니까?메모 남겨주세요.
읽어 주셔서 감사합니다.