이해하기 쉬운 방식으로 ES6의 해체를 설명하십시오

해체 란 무엇입니까?

해체는 데이터 구성과 완전히 반대입니다. 예를 들어, 새 객체 또는 배열을 구성하는 대신 기존 객체 또는 배열을 하나씩 분할하여 필요한 데이터를 추출합니다.

ES6은 새로운 패턴을 사용하여 추출하려는 숫자 값과 일치하며 해체 할당은이 패턴을 채택합니다. 이 패턴은 해체중인 데이터 구조를 매핑하며 패턴과 일치하는 데이터 만 추출됩니다.

해체 된 데이터 항목은 과제 연산자에 있습니다. =의 오른쪽에는 배열과 객체의 조합이있을 수 있으며 임의의 중첩이 가능합니다. 이 데이터에 값을 할당하는 데 사용되는 변수 수에는 제한이 없습니다.

배열 파괴

배열 해체는 배열을 데이터 항목으로 사용 하며이 배열에서 값을 추출하여 배열 패턴 (배열에서 필요한 값과 일치하는 데 사용)에 따라 하나 이상의 변수에 값을 할당 할 수 있습니다.

배열 패턴은 값의 위치에 따라 추출하려는 값을 식별하는 데 사용됩니다. 배열 패턴의 각 변수에 해체 된 배열의 위치에 해당하는 값이 할당되도록 배열의 구조를 정확하게 매핑 할 수 있어야합니다.

우리가 이해하는 데 도움이되는 몇 가지 예를 알려 드리겠습니다.

배열 패턴 예제

배열의 모든 값을 개별 변수에 할당합니다.

 // 배열 세트 const Avengers = [ 'Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // 배열을 변수로 해체합니다. 배열 패턴은 할당 연산자`=`의 왼쪽에 위치하고 구조화 된 배열은 //의 오른쪽에 있습니다. Const [Ironman, Cap, Blackwidow] = Avengers; // Ironman = 'Tony Stark'// cap = 'Steve Rogers'// blackwidow = 'Natasha Romanoff'// output Ironman : Ironman;

첫 번째 값을 제외한 모든 값을 추출하십시오

 Const Avengers = [ 'Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // 우리는 Tony Const [, Cap, Blackwidow] = Avengers를 사용할 필요가 없습니다. // Ironman = 오류 : Undefined // cap = 'Steve Rogers'// blackwidow = 'Natasha Romanoff'// 출력 캡; CAP;

두 번째 값을 제외한 모든 값을 추출하십시오

 Const Avengers = [ 'Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // CAP Missing Const [Ironman ,, Blackwidow] = Avengers; // Ironman = 'Tony Stark'// cap = error : undefined // blackwidow = 'Natasha Romanoff'// output blackwidow : blackwidow;

마지막 값을 제외한 모든 값을 추출하십시오

 Const Avengers = [ 'Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Ironman vs Cap Const [Ironman, Cap] = Avengers; // Ironman = 'Tony Stark'// cap = 'Steve Rogers'// blackwidow = error : undefined // output blackwidow : Ironman;

중첩 어레이

이 일치 패턴은 또한 할당 연산자 = 왼쪽의 배열 패턴이 오른쪽의 배열 구조와 일치하는 한 중첩 배열을 지원합니다. 왼쪽의 변수에는 오른쪽 배열의 위치에 해당하는 값이 할당 될 것임을 다시 설명하겠습니다. 아무리 깊이 그들을 둥지에 관계없이, 당신은 여전히 그들을 해체 할 수 있습니다.

중첩 된 배열 해체

 // 파괴 중첩 배열 Const Avengers = [ 'Natasha Romanoff', [ 'Tony Stark', 'James Rhodes'], [ 'Steve Rogers', 'Sam Wilson']; // Avengers와 그 파트너 Const [Blackwidow, [Ironman, Warmachine], [Cap, Falcon]] = Avengers; // BlackWidow = 'Natasha Romanoff'// Ironman = 'Tony Stark'// Warmachine = 'James Rhodes'// cap = 'Steve Rogers'// falcon = 'Sam Wilson'// Warmachine : Warmachine;

깊게 중첩 된 배열에서 값을 추출하십시오

 //이 배열에서 Pepper Potts Const Avengers 추출 = [ 'Natasha Romanoff', [[ 'Tony Stark', 'Pepper Potts'], 'James Rhodes'], [ 'Steve Rogers', 'Sam Wilson']; // Destructure const [, // 'Natasha Romanoff'[ // 참고 : 당신은 또한이 방법을 쓸 수 있습니다 // const [, [[, hera]]] = Avengers; // 출력 헤라 : 헤라; // Hera = 'Pepper Potts'

나머지 작업자를 사용하여 나머지 모든 항목을 캡처하십시오

특정 배열 항목을 가져 와서 나머지 항목을 배열에 넣으려면 나머지 작업자를 사용하여 다음과 같이 해체 할 수 있습니다.

 // 휴식 연산자를 통한 Const Avengers = [ 'Natasha Romanoff', 'Tony Stark', 'Steve Rogers']; Const [Blackwidow, ... The Fothers] = Avengers; 어스; // BlackWidow = 'Natasha Romanoff'// theothers = [ 'Tony Stark', 'Steve Rogers'] // theothers : theothers;

물체 파괴

물체 해체는 특히 복잡하고 깊게 중첩 된 물체에서 값을 가져와야 할 때 더 마법입니다. 반복하려면 객체 해체 및 배열 해체는 동일한 규칙을 사용합니다 (즉, 할당 연산자의 왼쪽에 객체 패턴을 작성하여 변수 위치가 오른쪽 의 객체의 값 위치와 일치합니다).

객체 파괴에서 추출 해야하는 속성 이름과 할당 될 변수 이름을 지정해야합니다. 배열 해체와 마찬가지로 할당 연산자의 왼쪽에 해체 된 객체를 매핑하기 위해 객체 패턴을 만들어야합니다.

이 경우 추출하려는 것은 객체 속성의 값입니다 (예 : { prop: value }에서 value 추출). 따라서, 우리의 객체 패턴에는 변수가 있어야하며,이 변수의 위치는 추출하려는 속성 값의 위치와 일치해야합니다.

간단한 예

간단한 개체 속성 값을 추출하십시오

우리는이를 수행 할 수 있습니다. 대상 { ironMan: 'Tony Stark' } 의 재산 ironMan 의 값을 변수 a 'Tony Stark' 할당 할 수 있습니다.

 // 객체의 속성 값을 해체하고 단일 변수`a` : const {Ironman : a} = {Ironman : 'Tony Stark'}에 할당하십시오. // 출력 a : a; // a = '토니 스타크'

다중 속성 값을 추출하십시오

동일한 패턴을 확장하는 한 다음과 같이 객체에서 여러 속성 값을 추출 할 수 있습니다.

 // 객체를 설정하고 Const Avengers = {Ironman : 'Tony Stark', Cap : 'Steve Rogers', Blackwidow : 'Natasha Romanoff'}; // 개별 변수에 대한 파괴 객체 const {Ironman : a, cap : b, blackwidow : c} = Avengers; // a = 'Tony Stark'// b = 'Steve Rogers'// c = 'Natasha Romanoff'// output a : a;

이 해체 패턴이 어떻게 해체 된 물체와 정확히 일치하는지 관찰하십시오.

중첩 된 물체 파괴

중첩 된 배열을 해체하는 것처럼, 우리는 중첩 된 물체를 얼마나 깊 더 있든 해체 할 수 있습니다.

 // 우리의 대상을 설정하는 Const Avengers = {BlackWidow : 'Natasha Romanoff', Ironmancharacters : {Ironman : 'Tony Manger :'Tony Stark ','Pepper Potts ',}, 파트너 : {Warmachine :'James Brodie '}}, Capcharacters : {Cap :'Steve Rogers ', {Sam Conc : // 개별 변수에 대한 파괴 객체 const {blackwidow : a, ironmancharacters : {coup : {Ironman : B, Hera : C}, 파트너 : {warmachine : d}}, 캡 chcharacters : {cap : e, 파트너; // a = 'Natasha Romanoff'// b = 'Tony Stark'// c = 'Pepper Potts'// d = 'James Brodie'// e = 'Steve Rogers'// f = 'Sam Wilson'// output a : a;

지정된 변수의 이름을 지정하십시오

물론 A, B, C 와 같은 변수 이름을 설정하는 것은 좋지 않으며 변수 이름이 의미가 있어야합니다.

오래 지속되는 이름 지정

 // 객체를 설정하고 Const Avengers = {Ironman : 'Tony Stark', Cap : 'Steve Rogers', Blackwidow : 'Natasha Romanoff'}; // 의미있는 이름을 가진 개별 변수에 대한 파괴 객체 const {Ironman : Ironman, Cap : Cap : Blackwidow : Blackwidow} = Avengers; // BlackWidow = 'Natasha Romanoff'// Ironman = 'Tony Stark'// cap = 'Steve Rogers'// output BlackWidow : BlackWidow;

이 접근법은 위의 이름 A, B 및 C 보다 낫지 만 여전히 개선 될 수 있습니다. { ironMan: ironMan } 은 약간 추악하고 직관적이지 않습니다.

구문 적으로 명명 된 바로 가기

객체의 속성 값을 변수에 할당하려면 변수의 이름이 객체의 속성 이름과 동일하면 왼쪽 의 할당 모드에서 다음과 같이 속성 이름 만 쓰면됩니다.

 // 객체를 설정합니다 Const Avenger = {Ironman : 'Tony Stark'}; // 의미있는 이름을 가진 개별 변수에 대한 파괴 객체 const {Ironman // 'Ironman : Ironman'} = Avenger; // Ironman = 'Tony Stark'// output Ironman : Ironman;

해체 된 객체 속성 이름은 지정된 변수 이름과 동일하므로 이름을 한 번만 나열하면됩니다.

간결한 문법

이전 코드를 조금 리트 윗하여 더 간결하고 명확하게 보이도록하겠습니다.

 // 객체를 설정하고 Const Avengers = {Ironman : 'Tony Stark', Cap : 'Steve Rogers', Blackwidow : 'Natasha Romanoff'}; // 의미있는 이름을 가진 개별 변수에 대한 파괴 객체 const {Ironman, Cap, Blackwidow} = Avengers; // 출력 Ironman : Ironman;

물체에서 깊게 중첩 된 속성을 추출하십시오

우리가 깊게 중첩 된 객체 속성을 추출하고 싶을 때 상황이 더욱 흥미 롭습니다.

 // ObjectConst Avengers = {BlackWidow : 'Natasha Romanoff', Ironmancharacters : {Ironman : {Ironman : 'Tony Stark :'Tony Stark : 'Tony Stark', 'Pepper Potts',}, 파트너 : {Warmachine : 'James Brodie'}}, Capcharacters : {falcon : 'Samcon :'Samcon : 'samcon :'samcon ' }}; // 깊이 중첩 된 ObjectConst {Ironmancharacters : {Couple}} = Avengers; // couple = {// Ironman : 'Tony Stark', // Hera : 'Pepper Potts', //} // 출력 커플;

잠깐,이 코드를 어떻게 읽었습니까? 변수 커플은 어떻게 정의됩니까?

이 방식으로 분할하면 왼쪽의 할당 연산자 = 가 해체 된 객체의 맵임을 알 수 있습니다.

 Const Avengers = {Ironmancharacters : {Couple : {Ironman : 'Tony Stark', Hera : 'Pepper Potts',}}}; const {Ironmancharacters : {Couple}} = Avengers; // 출력 커플 : 커플;

const { couple } = avengers; 부부 의 가치를 추출 할 방법이 없습니다. 추출 할 객체 속성의 위치와 이름을 매핑 할 때만 JS 컴파일러는 해당 정보를 얻고 객체의 모든 속성을 따라 검색하며 원하는 값을 정확하게 추출 할 수 있습니다.

또한 부부는 구문 단축키를 사용하여 변수 이름을 사용합니다. 실제로는 다음과 같습니다.

 const {Ironmancharacters : {커플 : 커플}} = 어벤져 스;

이것이 커플이 정의되는 방식이며 그 값은 객체 어벤져 스 에서 속성 이름 커플 의 값입니다.

객체의 속성을 해체하십시오

지금까지 값을 단일 변수에 할당하기 위해 객체의 값을 해체했으며 실제로 다른 객체의 속성에 값을 할당 할 수도 있습니다.

 Const Avengers = {Blackwidow : 'Natasha Romanoff', Ironmancharacters : {Ironman : 'Tony Mangar', Hera : 'Pepper Potts'}}}; 'Pepper Potts'}}}; Const IronmanProperties = {{}}; IronmanProperties.family// IronmanProperties.family = {// Ironman : 'Tony Stark', // Hera : 'Pepper Potts'//} // output IronmanProperties.family:IronManProperties.Family;

여기서는 ironManCharacters.couple 의 값을 ironManProperties.family 의 속성에 할당합니다. 다음은 설명 할 두 가지 요점입니다.

1. 해체 할당은 괄호 안에 포함되어야합니다

기존 변수 (위의 예에서 IronmanProperties 와 같은)를 해체 할 때 새 변수를 선언하는 대신이를 수행해야합니다.

2. 패턴은 여전히 일치합니다

{ ironManCharacters: { couple... } } Object Avengers 의 Ironmancharacters 와 일치합니다. 이렇게하면 Ironmancharacters ironManCharacters.couple 가치를 추출 할 수 있습니다. 그러나 이제 새로운 물체 Ironmanproperties 와 그 부동산 패밀리가 부부 뒤에 배치됩니다. 실제로,이 개체의 ironManProperties.family 은 실제로 할당됩니다.

이 상황을 명확하게 설명하려고 할 때 여전히 혼란 스럽습니까? JSFiddle 에서 위의 코드를 시도하면 모든 것이 명확해질 것입니다.

왜이 일을하고 있는지 잘 모르겠다면 다음 기사의 예를 참조하십시오. 이 예제는이 패턴이 API가 불리는 JSON 객체를 해체하는 데 사용되는 이유를 알려줍니다.

기본값

해체시 변수에 기본값을 지정할 수도 있습니다.

 // 객체를 설정하고 Const Avengers = {Ironman : 'Tony Stark', Cap : 'Steve Rogers', Blackwidow : 'Natasha Romanoff'}; // 기본값을 사용한 파괴 {Ironman, Cap, Blackwidow, thehulk = 'Bruce Banner'} = Avengers; // Ironman = 'Tony Stark'// cap = 'Steve Rogers'// blackwidow = 'Natasha Romanoff'// thehulk = 'Bruce Banner'// blackwidow : blackwidow;

해체 중에 이러한 문제를 피하십시오

const, let, var는 과제를 해체 할 때 사용되지 않습니다.

이 시점은 객체 속성 해체 및 할당에 대해 이야기 할 때 언급되었지만, 모든 사람들에게 깊은 인상을주기 위해 여기에 반복해야합니다.

선언 된 변수를 해체 할 수 없습니다

즉, 변수를 해체하는 동안 변수 만 선언 할 수 있습니다.

 // 우리의 개체를 설정하는 Const Avengers = {Ironman : 'Tony Stark', Cap : 'Steve Rogers', Blackwidow : 'Natasha Romanoff', thehulk : 'Bruce Banner'}; // 유효한 파괴 구조 const {Ironman} = 어벤져 스; {cap} = Avengers를하자; var {blackwidow} = 어벤져 스; // 유효하지 않은 파괴 구조가 thehulk; {thehulk} = 어벤져 스; // 오류 // 출력 thehulk : thehulk;

선언 된 변수를 해체 할 수없는 이유는 무엇입니까? Curly Braces를 사용하면 { JavaScript가 블록을 선언한다고 생각할 것입니다.

해결책은 한 쌍의 괄호 안에 해체 된 할당 전체를 동봉하는 것입니다.

선언 된 변수를 해체하고 할당하는 방법

 // 우리의 개체를 설정하는 Const Avengers = {Ironman : 'Tony Stark', Cap : 'Steve Rogers', Blackwidow : 'Natasha Romanoff', thehulk : 'Bruce Banner'}; // 유효한 헐크가 thehulk하자; ({thehulk} = Avengers); // thehulk = 'Bruce Banner'// outhulk : thehulk;

이제 우리는 Curly Braces로 시작하지 않으므로 JS는 우리가 블록을 선언하여 예상되는 해체 결과를 달성 할 수 있다고 생각하지 않습니다.

해체 된 값을 직접 반환합니다

다음으로 반환 할 변수가 먼저 선언되지 않은 경우, 해체 된 값이 직접 반환되어 예상 효과를 달성하지 못합니다. 예를 들어, 다음 코드에서 반환 된 전체 Ironman 객체는 Tony Stark 의 예상 값이 아닙니다.

 // 참고 : 작동하지 않습니다! 함수 gettonystark (Avengers) {return {Ironman : {realname}} = 어벤져 스; // RealName 값이 아닌 Avengers 객체를 반환} const Avengers = {Ironman : {RealName : 'Tony Stark'}}; Const Tonystark = Gettonystark (Avengers); // Tonystark = {// Ironman : {// realName : 'Tony Stark'//} //}; // 출력 Tonystark : Tonystark;

해체 된 객체에서 값을 추출하려면 먼저 변수에 할당 한 다음 다음 코드와 같이이 변수를 반환해야합니다.

 // 참고 : 이것은 작동합니다! 함수 gettonystark (Avengers) {const {Ironman : {realname}} = 어벤져 스; Realname을 반환하십시오. } const Avengers = {Ironman : {RealName : 'Tony Stark'}}; Const Tonystark = Gettonystark (Avengers); // Tonystark = 'Tony Stark'// 출력 Tonystark : Tonystark;

할당을 나누고 두 줄의 코드로 반환하는이 방법은 실제로 성가 시며 코드는 추악하고 불필요합니다. 불행히도 JavaScript는 이와 같이 작동합니다. 해체 된 값을 먼저 변수에 할당 한 다음 반환해야하며 두 단계를 개별적으로 수행해야합니다.

그러나 우리는 우리가 단지 그것을 별도로 수행했다고 말하지 않았으며, 두 줄의 코드에 넣어야한다고 말하지 않았습니다. 따라서 다음과 같이 한 줄로 작성하면 예상 결과를 얻을 수 있습니다.

 함수 gettonystark (Avengers) {return ({ironman : {realname}} = Avengers) && realname; } const Avengers = {Ironman : {RealName : 'Tony Stark'}}; Const Tonystark = Gettonystark (Avengers); // Tonystark = 'Tony Stark'// 출력 Tonystark : Tonystark;

JavaScript의 _short-circuit_ circuit_logical 연산자 (&& 및 ||) 는 첫 번째 피연산자의 값에 따라 두 번째 피연산자의 값을 반환하기 때문에이 쓰기 방법은 예상 효과를 달성 할 수 있습니다. 여기서 첫 번째 피연산자는 할당 표현식을 해체하고 값을 실재 에 할당하는 것입니다. RealName 은 두 번째 피연산자이므로 값이 마침내 반환됩니다.

이것은 최적이 아니지만 달성 할 수 있습니다. 코드의 부족을 추구하는 동안 코드의 가독성에주의를 기울여야합니다.

요약

이 기사는 과제 해체의 주요 원칙을 심층적으로 설명합니다. 해체는 코드의 양을 줄일뿐만 아니라 코드를 인코딩하는 방식을 근본적으로 변화시킵니다. 더 많이 사용할수록 과거에는 거의 불가능한 데이터와 기능을 더 많이 형성 할 수 있습니다. 이 기사가 ES6을 배우는 데 도움이되기를 바랍니다.