ES6 지식 점 정리 대상 의 할당 해제 응용

ES6 는 일정한 패턴 에 따라 배열 과 대상 에서 값 을 추출 하고 변 수 를 할당 할 수 있 습 니 다. 이 는 구조 해제 (Destructuring) 라 고 불 리 며 대상 의 구조 해제 할당 에 있어 주의해 야 할 사항 이 있 습 니 다.
초식 대상 의 해체
var {name} = {
  name:'Joh',
  age:10
};
console.log(name); // Joh

대상 의 속성 값 을 재 구성 형식 으로 추출 합 니 다.
해 체 된 속성 이름 바 꾸 기
var {name} = {
  name:'Joh',
  age:10
};
console.log(name); // Joh

//   {  :    } =                   
var {color:color2} = {
  color:'red',
  age:10
};
console.log(color2); // red
console.log(color); //     :Uncaught ReferenceError: color is not defined

대상 내장 구조 에서 패턴 과 변수의 차이
    var obj = {
      a:{
        b:{
          c:123
        }
      }
    };
    let {a:{b:{c}}} = obj; //                   ,   a b             ,     ,  c     
    console.log(c); // 123
    console.log(a, b, c); // Uncaught ReferenceError: a is not defined       

분석 대상 의 기본 값
var obj = {
  name:'Joh',
  age:22
};
var {name, id='999', age} = obj;
console.log(name, id ,age); // Joh 999 22

var obj2 ={
  name:'Lily',
  age:10
};

var {name:name2, id:id2='888', age:age2} = obj2;
console.log(name2, id2, age2); // Lily 888 10

해체 대상 에 나타 날 수 있 는 이상
① 아버지 가 재 구성 한 노드 는 undefined 이 므 로 프로 그래 밍 에서 이것 을 주의해 야 합 니 다. 부주의 한 오류 에 속 합 니 다.
let {x:{y}} = {name:{y:12}}; //       x   ,   :Cannot destructure property `y` of 'undefined' or 'null'.

② 변수 이름 바 꾸 기 오 류 를 미리 정 의 했 습 니 다.
let name;
let {name} = {name:'Joh'}; // Uncaught SyntaxError: Identifier 'name' has already been declared


해결 방안 1:
let name;
let {name:name2} = {name:'Joh'};
console.log(name2);

해결 방안 2:
var name;
var {name} = {name:'Joh'};
console.log(name);

좋은 웹페이지 즐겨찾기