프로처럼 자바스크립트 객체 분해

안녕하세요!
오랫동안 저는 자바스크립트의 해체 개념과 관련된 몇 가지 기교를 기억하고 싶었습니다.나는 일단 내가 더 이상 자주 사용하지 않는다면 매일 배우고 사용하는 대부분의 것들이 사라질 것이라고 생각한다.그래서 나는 매일 그것을 보지 않더라도 이 물건들을 적어서 내 몸에 더 오래 머물게 하기로 결정했다.나는 중학교와 고등학교 때 자주 이렇게 했지만 대학에 입학하자마자 멈추었다. 나는 지금 결과를 느꼈다. 특히 나의 기억력이 매우 불안정하다는 것을 고려했다.
JavaScript의 해체 사상에 익숙하지 않은 사람들에게 다음은 그것에 대한 간략한 개술이다.만약 구글에서 검색을 한다면 그것에 관한 게시물도 대량으로 나올 수 있으므로 내용이 너무 짧거나 뚜렷하지 않으면 마음대로 더 많은 내용을 찾아보세요.)
JavaScript에 항상 사람들이 사용할 수 있는 해체 기능이 있는 것은 아니다. 2015년 6월에 이 개념은 다른 일부 기능과 함께 이 언어에 도입되었다. 이런 기능은 이 언어의 6판을 구성했고 보통 ES6 또는 ES2015(참고검사this라고 불린다.
그 기본 사상은 대상 속성이나 수조 값에 근거하여 변수를 더 아름다운 방식으로 분배하는 것을 허용하는 것이다.만약 그것이 어떤 물건을 구성하는 상반된 생각이라고 생각한다면, 그 대상은 당신이 원하는 값을 찾을 때까지 파편으로 분해되어 변수를 만들고 있는 것을 발견할 수 있을 것이다.
다음 코드를 확인하십시오. 변수를 만드는 방법 중 하나를 보여 줍니다. 이 변수는 대상에 포함되어야 합니다. 해체가 있는지 모르기 때문입니다.
키워드classs와 충돌하지 않도록 전체 텍스트에 이렇게 쓰여 있음을 주의하십시오.

const homoSapiens = {
  kingdom: 'Animalia',
  classs: 'Mammalia',
  family: 'Hominidae',
  genus: 'Homo',
  species: 'H. sapiens'
}

const homoSapiensFamily = homoSapiens.family;

// and if you want to be certain of the type of the variable, you would
// set a default value for it in case the `family` property does not 
// exist in the source object
const safeHomoSapiensFamily = homoSapiens.family || '';

이 대상에서 사용하고 싶은 모든 속성에 대해 똑같은 일을 해야 한다. 이것은 매우 고통스러운 일이 아니다. 그러나 우리가 분해의 힘을 이용하여 변수를 만들고 그 유형을 확정할 수 있을 때 왜 우리는 이렇게 해야 하는가?
다음은 같은 작업을 수행하기 위해 해체를 사용하는 코드 세션입니다.

const { family = '', species = '' } = homoSapiens;

여기서 우리는 원본 대상에서 같은 이름을 가진 속성을 바탕으로 두 변수class와 family를 만들었다.대상에 이 두 속성이 포함되지 않아도 문자열인지 확인해야 합니다.species와 family를 단독으로 보면 정말 의미 있는 변수 이름이 아니라고 생각할 수 있습니다.해체는 대상의 속성 이름을 사용하지 않고 필요한 변수 이름 (별명) 을 지정할 수 있도록 합니다.

const {
  family: homoSapiensFamily = '',
  species: homoSapiensSpecies = ''
} = homoSapiens;

여기에서 우리는 이전과 같은 값을 사용했지만, 현재 우리는 두 개의 변수 species 와 homoSapiensFamily 를 만들었다.더 의미가 있죠?
만약 네가 지금 이런 생각을 가지고 있다면, 나는 네가 이미 알아차렸다고 믿는다. 너는 진정한 끼워 넣는 대상을 미친 듯이 분해할 수 있을 것이다.

const homoSapiens = {
  classs: {
    name: 'Mammalia',
    super: {
      name: 'Tetrapoda'
    },
    sub: {
      name: 'Theria'
    }
  },
  species: 'H. sapiens'
};

const {
  classs: {
    super: {
      name: homoSapiensSuperClass = ''
    }
  }
} = homoSapiens;

여기에서 우리는 homoSapiensSpecies라는 변수를 만들었는데 그 값은 homoSapiensSuperClass이다.
만약 우리가 끼워 넣는 대상을 해체하려고 시도하지만, 어느 점에서 우리가 지정한 속성이 존재하지 않는다면 어떻게 해야 합니까?

// considering the previous homoSapiens object

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    }
  }
} = homoSapiens;

만약 네가 이것을 시도한다면, 너는 우리가 잘못을 얻었다는 것을 알게 될 것이다. 라고 그가 말했다.

Uncaught TypeError: Cannot destructure property `name` of 'undefined' or 'null'.

이는 소스 대상 중 Tetrapoda 대상 아래 사실상 infra라는 대상이 하나도 없기 때문이다.따라서 classs 변수는 정의된 적이 없다.
이러한 상황을 피하기 위해 대상을 분해할 때 모든 속성에 기본값을 설정할 수 있습니다.이러한 특정 상황에서 homoSapiensInfraClass 속성의 기본값이 대상인지 확인하고 이 속성이 존재하지 않는 상황에서 계속 분해할 수 있도록 해야 합니다.

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    } = {}
  } = {}
} = homoSapiens;

이 방식을 통해 infra 대상에 homoSapiens라는 속성이 포함되지 않더라도 infra라는 변수가 정의됩니다. 이 변수는 기본값을 설정하지 않았거나 homoSapiensInfraClass입니다.

스토리지에도 적합합니다!

수조의 생각은 기본적으로 같다. 문법이 조금 다른 것을 제외하고는 속성명을 고려하지 않고 수조 중의 항목의 순서에 따라 일을 하는 것이 다르다.

const [first, second ] = ['a', 'b'];
// first will be 'a' and second will be 'b'

// you can also set default values
const [safeFirst = 'a', safeSecond = 'b'] = ['a']
// safeSecond here will have a value of 'b'

함수 서명에도 적용됩니다!

함수 서명에서 수신 대상의 특정한 속성만 함수 상하문에 공개할 수 있도록 분해할 수 있습니다.

const homoSapiens = {
  kingdom: 'Animalia',
  classs: 'Mammalia',
  family: 'Hominidae',
  genus: 'Homo',
  species: 'H. sapiens'
}

function logSpeciesInfo ({ species = '', kingdom = '', classs = '' }) {
  console.log(`The species ${species} belongs to the ${kingdom} kingdom and ${classs} class.' );
}

logSpeciesInfo(homoSapiens);
// Logs "The species H. sapiens belongs to the Animalia kingdom and Mammalia class."

함수체에는 함수 헤더에 지정되지 않은 대상의 다른 속성이 없습니다.

어디서든 분해할 수 있을까요?

MDN 웹 문서의 Destructuring assignment 페이지에는 이 문법의 현재 브라우저 호환성을 보여 주는 멋진 표가 있습니다.너는 그것이 광범위한 지지를 받았다는 것을 볼 수 있기 때문에 호환성은 너에게 문제가 되어서는 안 된다. 단지... 을 제외하고는.(너한테는 일이야:)

테스트

네가 이 글에서 배운 바에 의하면, 너는 어떠한 추가 변수도 사용하지 않는 상황에서 해체 기능을 사용하여 두 변수의 값을 교환할 수 있니?댓글을 보기 전에 시도해 보기;)
댓글로 알려주세요!만약 다른 해체 용례가 있다면 공유도 확보해야 한다: D
읽어주셔서 감사합니다!