객체 소멸은 객체에서 속성을 추출하여 변수에 바인딩하는 데 유용한 자바스크립트 기능입니다.
더 좋은 점은 객체 소멸은 하나의 문에서 여러 속성을 추출하고 중첩 된 객체의 속성에 액세스 할 수 있으며 속성이 존재하지 않는 경우 기본값을 설정할 수 있다는 것입니다.
이 게시물에서는 자바 스크립트에서 객체 소멸을 사용하는 방법을 설명하겠습니다.
1. 객체 소멸에 대한 필요성
객체의 일부 속성을 추출하고 싶다고 상상해보십시오. 다음 코드를 작성해야 합니다:
var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'속성hero.name값은 변수name에 할당됩니다. 같은 방법으로hero.realName값이realName에 할당됩니다.
속성에 액세스하여 변수에 할당하려면 상용구 코드가 필요합니다. var name = hero.name을 작성하면name바인딩을 2 번 언급하고realName에 대해서도 동일하게 언급해야합니다. 속성을 읽고 속성 이름을 복제하지 않고 해당 값을 변수에 할당할 수 있습니다. 그 이상,당신은 단지 하나의 문에서 동일한 개체에서 여러 속성을 읽을 수 있습니다!
위의 스크립트를 리팩터링하고 객체 소멸을 적용하여name속성에 액세스하고realName:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'const { name, realName } = hero 객체 소멸 할당입니다. 이 문은 변수name및realName를 정의한 다음 해당 속성hero.name및hero.realName의 값을 할당합니다.
객체 속성에 액세스하기 위한 2 가지 접근 방식 비교:
const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;속성 이름이나 개체 변수가 중복되지 않기 때문에 개체 소멸이 더 까다롭다는 것을 알 수 있습니다.
2. 속성 추출
객체 소멸의 기본 구문은 매우 간단합니다:
const { identifier } = expression;여기서identifier는 액세스할 속성의 이름이고expression는 개체에 대해 계산해야 합니다. 소멸 후 변수identifier에는 속성 값이 포함됩니다.
속성 접근자를 사용하는 동등한 코드는 다음과 같습니다:
const identifier = expression.identifier;의 실제로 객체 소멸을 해보자:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'문const { name } = hero는 변수name를 정의하고hero.name속성 값으로 초기화합니다.
3. 여러 속성 추출
개체를 여러 속성으로 분해하려면 그 사이에 쉼표,를 추가할 수 있는 만큼 속성을 열거합니다:
const { identifier1, identifier2, ..., identifierN } = expression;여기서identifier1,…,identifierN은 액세스 할 속성의 이름이며expression는 객체로 평가해야합니다. 소멸 후 변수identifier1,…,identifierN에는 해당 속성 값이 포함됩니다.
여기에 해당하는 코드가 있습니다.:
const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;2 개의 속성이 추출되는 첫 번째 섹션의 예제를 다시 살펴보겠습니다:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'const { name, realName } = hero 해당 속성hero.name및hero.realName의 값으로 할당된 변수name및realName2 개를 만듭니다.
4. 기본값
소멸된 개체에 소멸성 할당에 지정된 속성이 없으면 변수는undefined로 할당됩니다. 그것이 어떻게되는지 보자:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefinedenemies속성이hero객체에 존재하지 않기 때문에 변수enemies를 소멸 한 후undefined입니다.
다행히 소멸된 개체에 속성이 없는 경우 기본값을 설정할 수 있습니다. 기본 구문은 다음과 같습니다:
const { identifier = defaultValue } = expression;여기서identifier는 액세스할 속성의 이름이고expression는 개체에 대해 계산해야 합니다. 소멸 후 변수identifier에는 속성 값이 포함되거나identifier속성이 없는 경우defaultValue이 할당됩니다.
여기에 해당하는 코드가 있습니다.:
const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;이전 코드 샘플을 변경하고 기본값 기능을 사용하겠습니다:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 이제undefined이 아닌 변수enemies의 기본값은입니다.
5. 별칭
속성이 아닌 다른 이름의 변수를 만들려면 개체 소멸의 별칭 기능을 사용할 수 있습니다.
const { identifier: aliasIdentifier } = expression;identifier 액세스 할 속성의 이름이고aliasIdentifier은 변수 이름이며expression는 개체로 평가해야합니다. 소멸 후 변수aliasIdentifier에는 속성 값이 포함됩니다.
동등한 부호:
const aliasIdentifier = expression.identifier;다음은 개체 소멸성 별칭 기능의 예입니다:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'const { realName: secretName } = hero을 보면 구조 조정은 새 변수secretName(별칭 변수)를 정의하고 값hero.realName를 할당합니다.
6. 중첩된 개체에서 속성 추출
앞의 예에서는 개체가 일반적이었습니다.
종종 객체는 다른 객체에 중첩 될 수 있습니다. 즉,일부 속성에는 개체가 포함될 수 있습니다.
이 경우에도 객체 소멸을 사용하고 깊은 곳에서 속성에 액세스 할 수 있습니다. 기본 구문은 다음과 같습니다:
const { nestedObjectProp: { identifier } } = expression;nestedObjectProp 중첩된 개체를 보유하는 속성의 이름입니다. identifier는 중첩된 개체에서 액세스할 속성 이름입니다. expression는 파괴 된 객체로 평가해야합니다.
소멸 후 변수identifier는 중첩된 개체의 속성 값을 포함합니다.
위의 구문은 다음과 같습니다:
const identifier = expression.nestedObjectProp.identifier;속성을 추출할 수 있는 중첩 수준은 제한이 없습니다. 깊은 곳에서 속성을 추출하려면 중첩 된 중괄호를 더 추가하십시오:
const { propA: { propB: { propC: { .... } } } } = object;예를 들어 개체hero에는 중첩된 개체{ city: 'Gotham'}가 포함되어 있습니다.
const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'개체 소멸const { address: { city } } = hero중첩된 개체에서city속성에 액세스할 수 있습니다.
7. 동적 이름 추출 속성
동적 이름으로 변수 속성을 추출 할 수 있습니다(속성 이름은 런타임에 알려짐).:
const { : identifier } = expression;propName 식은 속성 이름(일반적으로 문자열)으로 계산되어야 하며identifier는 소멸된 후에 생성된 변수 이름을 나타내야 합니다. 두 번째expression는 파괴하려는 개체를 평가해야 합니다.
객체 소멸이 없는 동등한 코드:
const identifier = expression;prop에 속성 이름이 있는 예를 살펴보겠습니다:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'const { : name } = hero 변수name에hero값을 할당하는 객체 소멸이며,prop는 속성 이름을 포함하는 변수입니다.
8. 소멸 후 나머지 개체
나머지 구문은 소멸 후 나머지 속성을 수집하는 데 유용합니다:
const { identifier, ...rest } = expression;여기서identifier는 액세스할 속성의 이름이고expression는 개체에 대해 계산해야 합니다.
소멸 후 변수identifier에는 속성 값이 포함됩니다. rest변수는 나머지 속성을 가진 일반 개체입니다.
예를 들어name속성을 추출하지만 나머지 속성은 그대로 유지합니다:
const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }소멸const { name, ...realHero } = hero는name속성을 추출합니다.
동시에 나머지 속성(이 경우realName)이 변수realHero:{ realName: 'Bruce Wayne' }로 수집됩니다.
9. 일반적인 사용 사례
9.1 변수에 속성 바인딩
앞의 많은 예제에서 볼 수 있듯이 개체 소멸은 속성 값을 변수에 바인딩합니다.
개체 소멸은const,let및var를 사용하여 선언된 변수에 값을 할당할 수 있습니다. 또는 이미 존재하는 변수에 할당 할 수도 있습니다.
예를 들어let문을 사용하여 파괴하는 방법은 다음과 같습니다:
// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'var문을 사용하여 파괴하는 방법:
// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'그리고 이미 선언 된 변수를 파괴하는 방법:
// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'나는for..of사이클과 객체 소멸을 결합하여 속성을 즉시 추출하는 것이 만족 스럽다는 것을 알았다:
const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}9.2 함수 매개 변수 소멸
일반적으로 객체 소멸 할당이 발생하는 모든 위치에 배치 할 수 있습니다.
예를 들어,함수의 매개 변수 목록 바로 안에 개체를 파괴할 수 있습니다:
const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => function({ name }) name속성 값을 보유하는 변수name를 생성하여 함수 매개 변수를 파괴합니다.
10. 요약
개체 소멸은 개체에서 속성을 추출하고 이러한 값을 변수에 바인딩할 수 있는 강력한 기능입니다.
나는 특히 객체 소멸이 간결한 구문과 하나의 문장에서 여러 변수를 추출 할 수있는 능력에 대해 좋아한다.
바라건대,내 게시물이 객체 소멸이 얼마나 유용한 지 알 수있었습니다!
