ES6 심도 있는 이해 - 대상 해체와 그룹 해체

왜 해체 기능을 사용합니까

ES5 및 이전 릴리즈에서는 개발자들이 객체와 배열에서 특정 데이터를 가져오고 변수에 값을 지정하기 위해 다음과 같이 여러 가지 동질화되어 보이는 코드를 작성했습니다.

let options = {
    repeat:true,
    save:false
};
//       
let repeat = options.repeat,
    save = options.save;

이 코드는options 대상에서 Repeat와save의 값을 추출하여 동명 국부 변수로 저장한다. 추출하는 과정은 매우 비슷하다. 만약에 더 많은 변수를 추출하려면 비슷한 코드를 순서대로 작성하여 변수에 값을 부여해야 한다. 만약에 그 안에 끼워 넣는 구조가 포함되어 있다면 실제 정보를 찾을 수 없기 때문에 전체 데이터 구조를 깊이 파헤쳐야만 필요한 데이터를 찾을 수 있다.

대상 해체

객체 구문의 구문은 다음과 같이 지정된 작업의 왼쪽에 객체 글꼴을 배치하는 구문입니다.

let node = {
    type:"Identifier",
    name:"foo"
};
let {type,name} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"

이 코드에서, node.type의 값은 type이라는 변수에 저장됩니다.node.name의 값은 name이라는 변수에 저장됩니다.
주의: var,let,const를 사용하여 성명 변수를 풀려면 초기화 프로그램 (즉 등호 오른쪽의 값) 을 제공해야 합니다. 그렇지 않으면 프로그램이 문법 오류를 낼 수 있습니다.

할당 해제

마찬가지로 변수에 값을 지정할 때 다음과 같은 구문 구문을 사용할 수 있습니다. 변수를 정의한 후 값을 수정하려면 다음과 같이 하십시오.

let node = {
    type:"Identifier",
    name:"foo"
},

type = "Literal",
name = 5;

//             
({type,name} = node);

console.log(type);//"Identifier"
console.log(name);//"foo"

이 예시에서 변수 type과name을 설명할 때 하나의 값을 초기화합니다. 다음 몇 줄에서 값을 해체하는 방법을 통해 node 대상에서 해당하는 값을 읽고 이 두 변수의 값을 다시 부여합니다.주의: 반드시 한 쌍의 작은 괄호로 값 풀이 문장을 감싸야 한다. 자바스크립트 엔진은 한 쌍의 열린 괄호를 하나의 코드 블록으로 간주하고 문법에 의하면 코드 블록은 값 풀이 문장의 왼쪽에 나타나지 않는다. 작은 괄호를 추가하면 블록 문장을 하나의 표현식으로 전환시켜 전체 값 풀이 과정을 실현할 수 있다.

기본값

대입 해제 표현식을 사용할 때 지정된 로컬 변수 이름이 객체에 없는 경우 이 로컬 변수는 다음과 같이 undefined로 대치됩니다.

let node = {
    type:"Identifier",
    name:"foo"
};
let {type,name,value} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
console.log(value);//undefined

지정된 속성이 없는 경우 원하는 대로 기본값을 정의하고 속성 이름 뒤에 등호(=)와 해당 기본값을 추가하면 됩니다.

let node = {
    type:"Identifier",
    name:"foo"
};
let {type,name,value = true} = node;
console.log(type);//"Identifier"
console.log(name);//"foo"
console.log(value);//true

비동명 로컬 변수에 값 지정

지금까지의 모든 실례에서 구조 부여 값은 대상 속성과 같은 이름의 국부 변수를 사용했다. 예를 들어 node.type의 값은 변수 type에 저장됩니다.그러나 다른 이름의 로컬 변수를 사용하여 객체 속성의 값을 저장하려는 경우 ES6의 확장 구문 중 하나는 다음과 같습니다.

let node = {
    type:"Identifier",
    name:"foo"
};
let {type:localType,name:localName} = node;
console.log(localType);//"Identifier"
console.log(localName);//"foo"

다른 변수 이름을 사용하여 값을 지정할 때도 기본값을 추가할 수 있습니다. 변수 이름 뒤에 등호와 기본값을 추가하기만 하면 됩니다.

let node = {
    type:"Identifier"
};
let {type:localType,name:localName = "bar"} = node;
console.log(localType);//"Identifier"
console.log(localName);//"bar"

네스트된 객체 구성 해제

let node = {
    type:"Identifier",
    name:"foo",
    loc:{
        start:{
          line:1,
          column:1
        },
        end:{
          line:1,
          column:4
        }
    }
};

let {loc:{start}} = node;
console.log(start.line);//1
console.log(start.column);//1

이 예시에서, 우리는 해체 모드에서 괄호를 사용했는데, 그 의미는 node 대상의loc 속성을 찾은 후에 start 속성을 계속 찾아야 한다는 것이다.더 나아가 객체 속성 이름과 다른 로컬 변수 이름을 사용할 수도 있습니다.

let node = {
    type:"Identifier",
    name:"foo",
    loc:{
        start:{
          line:1,
          column:1
        },
        end:{
          line:1,
          column:4
        }
    }
};
//  node.loc.start
let {loc:{start:localStart}} = node;
console.log(localStart.line);//1
console.log(localStart.column);//1

그룹 해체

객체 분해의 구문에 비해 배열 분해는 훨씬 간단합니다. 배열 글꼴을 사용하고 객체 글꼴 구문처럼 객체의 명명 속성을 사용하는 것이 아니라 전체 구문 작업이 배열에서 수행됩니다.

let colors = ["red","green","blue"];
let [firstColor,secondColor] = colors;
console.log(firstColor);//"red"
console.log(secondColor);//"green"

이 코드에서, 우리는colors 수조에서 '레드' 와 '그린' 두 값을 해체하여 각각 변수firstColor와 변수secondColor에 저장합니다.수조 해구 문법에서, 우리는 값이 수조에 있는 위치를 선택하고, 임의의 변수에 저장할 수 있으며, 명시적으로 명시되지 않은 요소는 모두 무시된다.이 과정에서 수조 자체는 어떠한 변화도 일어나지 않는다.
해구 모드에서도 원소를 직접 생략하고 관심 있는 원소에만 변수명을 제공할 수 있다.예를 들어, 만약 당신이 그룹의 세 번째 값만 찾으려면, 첫 번째 요소와 두 번째 요소의 변수 이름을 제공할 필요가 없다.

let colors = ["red","green","blue"];
let [ ,,thirdColor] = colors;
console.log(thirdColor);//"blue"

할당 해제

수조 해체도 값 상하문에 사용할 수 있지만 소괄호로 표현식을 감싸지 않아도 된다는 점은 대상 해체의 약정과 다르다.

let colors = ["red","green","blue"],
    firstColor = "black",
    secondColor = "purple";
[firstColor,secondColor] = color;
console.log(firstColor);//"red"
console.log(secondColor);//"green"

수조 해체에는 또 하나의 독특한 용례가 있다. 두 변수의 값을 교환하는 것이다.ES5에서 두 변수의 값을 교환하려면 세 번째 임시 변수를 도입해야 하지만 ES6의 배열 구조에 다음과 같은 추가 변수가 필요하지 않습니다.

let a = 1,
    b = 2;

[a,b] = [b,a];

console.log(a);//2
console.log(b);//1

기본값

또한 배열의 임의의 위치에 기본값을 추가하여 지정된 위치의 속성이 없거나 undefined 값이 있을 때 기본값을 사용할 수 있습니다.

let colors = ["red"];
let [firstColor,secondColor = "green"] = colors;
console.log(firstColor);//"red"
console.log(secondColor);//"green"

중첩수 그룹 해체

let colors = ["red",["green","lightgreen"],"blue"];

let [firstColor,[secondColor]] = colors;

console.log(firsrColor);//"red"
console.log(secondColor);//"green"

이 예시에서 변수 secondColor가 인용한 일colors 그룹의 값 '그린' 은 이 요소가 그룹 내부의 다른 그룹에 포함되어 있기 때문에secondColor 양측의 네모난 괄호는 필요한 해구 모드입니다.마찬가지로 수조에서도 대상처럼 무한히 깊이 파고들 수 있다.

부정원소

배열에서... 구문을 사용하여 배열의 나머지 요소를 다음과 같은 특정 변수에 값을 지정할 수 있습니다.

let colors = ["red","green","blue"];

let [firstColor,...restColors] = colors;

console.log(firstColor);//"red"
console.log(restColors.length);//2
console.log(restColors[0]);//"green"
console.log(restColors[1]);//"blue"

주의: 해체된 수조에서 부정확한 요소는 마지막 항목이어야 하며, 뒤에 쉼표를 계속 추가하면 프로그램이 문법 오류를 낼 수 있습니다.

혼합 해체

객체 및 배열을 혼합하여 더 복잡한 표현식을 만들 수 있습니다. 그러면 객체와 배열이 혼합된 모든 데이터 구조에서 원하는 정보를 추출할 수 있습니다.

let node = {
    type:"Identifier",
    name:"foo",
    loc:{
        start:{
          line:1,
          column:1
        },
        end:{
          line:1,
          column:1
        }
     },
     range:[0,3]
};

let {
    loc:{start},
    range:[startIndex]
} = node;

console.log(start.line);//1
console.log(start.column);//1
console.log(startIndex);//0

이 코드는 각각 node입니다.loc.start와 node.range[0]는 변수 start 및 startIndex에서 추출됩니다.기억: 해체 모드의loc:와range: 대상의 위치, 즉 대상의 속성만 나타냅니다.