ES6의 구조 분해

해체한다는 것은 어떤 것의 구조를 해체하는 것을 의미합니다. Javascript에서는 배열, 객체 또는 문자열이 될 수 있으며 개별적으로 분해된 다음 변수에 재할당됩니다.

구조 분해 배열

ES6 이전에는 배열의 값을 개별 변수에 할당하는 경우 다음과 같이 수행됩니다.

그러나 ES6이 등장했습니다. 아래 예에서 어떻게 바뀌었는지 봅시다.

이해하기 쉽습니다. 우리는 점수 배열의 값을 구조화하고 정의된 순서대로 배열의 요소를 상속할 변수를 만들었습니다. 따라서 x는 500인 점수 배열의 첫 번째 값이고 y는 400이고 z에 대해 동일한 두 번째 값입니다.

참고 [X는, Y는, (Z)]가 있다 하지 새로운 배열 .

배열을 구조화하고 배열의 요소보다 더 많은 변수를 생성하는 경우 상속할 요소가 없는 각 변수는 undefined를 반환합니다. 아래 예:

새로운 변수 'w'를 추가했지만 구조화되지 않은 배열에서 상속받을 요소가 남아 있지 않아 undefined로 반환되었습니다.

상속할 요소가 남아 있지 않으므로 기본값을 w에 할당할 수 있습니다(아래 예 참조).

원래 배열의 요소 건너뛰기

상속 순서를 건너뛰고 배열의 다른 요소로 점프하려는 상황에서는 쉼표 사이에 공백이 있는 원래 배열에서 건너뛸 요소의 위치에 쉼표를 넣으면 됩니다. 살펴보세요:

배열의 첫 번째 요소(500)를 건너뛰고 두 번째 요소에서 할당을 시작했습니다.

나머지 매개변수 사용

Rest 매개변수 와 Spread 구문 및 사용 방법에 이미 익숙하다고 가정 합니다.

위의 예에서 x는 배열의 첫 번째 요소에 할당되고 요소의 "나머지"는 할당된 요소를 포함하는 배열을 반환하는 나머지 매개변수 구문 "..."을 사용하여 y에 할당됩니다.

객체 분해

위의 예에서 우리는 배열을 구조화했습니다. 이제 예제로 시작하여 객체를 구조화하는 방법을 살펴보겠습니다.

이미 차이점을 볼 수 있습니다. 중괄호와 분해하는 동안 객체 이름을 변수 이름으로 사용했다는 사실입니다. 이름을 변경하면 undefined가 반환되지만 강제로 사용해야 하는 것은 아닙니다. 개체 이름을 재정의하는 방법을 살펴보겠습니다.

이제 기본 개체 이름을 재정의할 새 변수 이름을 할당했습니다.

구조화 문자열

여기서 "UI"라는 문자열은 개별적으로 분리되어 생성된 변수에 할당됩니다. 그러나 문자열에 "UI가 중요합니다"와 같은 문자가 더 많다면 어떻게 될까요? 출력은 어떻게 될까요? 출력은 문자열의 구조 해제가 단어별로 수행되는 것이 아니라 문자별로 수행되므로 문자열에서 함께 그룹화되더라도 'U' 문자가 먼저 할당되고 'I'가 뒤따르는 것과 동일하게 유지됩니다.

이 기사에서는 그렇게 합니다. 이 시점에서 Destructuring이 작동하는 방식을 이해하고 개발자로 발전하면서 이를 편안하게 사용할 수 있기를 바랍니다. 읽어 주셔서 감사합니다. 내 기사를 귀하의 이메일로 직접 보내도록 구독할 수도 있습니다. 즐거운 코딩!