12.6(할당 해제)

할당 해제

대상의 해체 값은 한 대상에서 값을 얻는 데 사용되며, 목표 대상 자체의 모든 범람 가능한 (enumerable), 읽히지 않은 속성을 지정한 대상에 분배하는 것과 같다.모든 키와 그것들의 값은 새 대상에 복사될 것이다.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x     // 1
y     // 2
z     // { a: 3, b: 4 }

구성 해제 값은 등호 오른쪽이 하나의 대상이어야 하기 때문에 등호 오른쪽이undefined나null이면 대상이 될 수 없기 때문에 오류가 발생합니다.

let { x, y, ...z } = null; //      
let { x, y, ...z } = undefined; //      

구성 해제 값은 마지막 매개 변수여야 합니다. 그렇지 않으면 오류가 발생합니다.

let { ...x, y, z } = obj; //     
let { x, ...y, ...z } = obj; //     

주의해야 할 것은, 해체 값의 복사는 얕은 복사이다. 즉, 키의 값이 복합 유형의 값 (수조, 대상, 함수) 이라면, 해체 값의 복사는 이 값의 인용이지, 이 값의 복사가 아니다.

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b  // 2

위 코드에서 x는 구성 해제 값이 있는 대상이고 대상obj의 a 속성을 복사했다.a 속성은 하나의 대상을 인용한다. 이 대상의 값을 수정하면 그 대상에 대한 인용에 영향을 줄 수 있다.
확장 연산자의 해체 값은 원형 대상의 속성을 복제할 수 없습니다.

let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__ proto __ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

위 코드에서 대상 o3은 o2를 복제했지만 o2 자체의 속성만 복제했고 원형 대상 o1의 속성은 복제하지 않았다.
부수값을 해체하는 용도는 함수를 확장하는 매개 변수로 다른 조작을 도입하는 것이다.

function baseFunction({ a, b }) {
  // ...
}
function wrapperFunction({ x, y, ...restConfig }) {
  //    x   y       
  //           
  return baseFunction(restConfig);
}

위 코드에서 원시 함수인 baseFunction은 a와 b를 매개 변수로 받아들였고 함수 wrapperFunction은 baseFunction을 바탕으로 확장하여 여분의 매개 변수를 받아들일 수 있고 원시 함수의 행위를 보존할 수 있다.

객체의 확장 연산자

객체의 확장 연산자는 Object를 사용하는 것과 같습니다.assign () 방법입니다.

let aClone = { ...a };
//    
let aClone = Object.assign({}, a);

위의 예는 대상 실례의 속성을 복사한 것일 뿐입니다. 만약에 대상을 완전하게 복제하고 대상의 원형 속성을 복사하려면 아래의 쓰기를 사용할 수 있습니다.

//    
const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};

//    
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

//    
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
      Object.getOwnPropertyDescriptors(obj)
   )

확장 연산자는 두 객체를 결합하는 데 사용할 수 있습니다.

  let ab = { ...a, ...b };
    //    
    let ab = Object.assign({}, a, b);

확장자 뒤에 배치된 사용자 정의 속성은 확장자 내부의 동일한 이름의 속성을 덮어씁니다.

let aWithOverrides = { ...a, x: 1, y: 2 };
//    
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
//    
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
//    
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

위 코드에서 a 대상의 x 속성과 y 속성은 새 대상으로 복사하면 덮어씁니다
확장 연산자의 매개 변수 대상 중, 만약 수치 함수 get이 있다면, 이 함수는 실행될 것입니다.

//        ，   x        ，    
let aWithXGetter = {
  ...a,
  get x() {
    throw new Error('not throw yet');
  }
};

//      ，   x       
let runtimeError = {
  ...a,
  ...{
    get x() {
      throw new Error('throw now');
    }
  }
};