동적 속성 이름을 사용하여 JavaScript 개체를 만드는 방법은 무엇입니까?

동적 속성 이름을 사용하여 객체 생성

JavaScript에서 객체는 일반적으로 리터럴 키-값 쌍을 사용하여 정의됩니다. 그러나 속성 이름이 동적이거나 개체 생성 시 알 수 없는 시나리오가 발생할 수 있는 경우가 있습니다. 이는 대괄호 표기법을 사용하여 달성할 수 있습니다.

문제:

다음 코드 조각을 고려하세요.

var KEYS = {} ;

KEYS.PHONE_TYPE = 'phone-type';
KEYS.AGENT_TYPE = 'agent-type';

var myAppConfig = {
    ...
    iconMap : { 
        KEYS.PHONE_TYPE : 'icon-phone', 
        KEYS.AGENT_TYPE : 'icon-headphones'
    };
    ...
};

이 코드는 다음과 같이 실패합니다. "':'이(가) 예상되었지만 대신 '.'이 표시되었습니다." 오류 이는 점 표기법(.)을 사용하여 myAppConfig 개체의 속성으로 KEYS 개체에 액세스하려고 하기 때문입니다. 이 문제를 해결하려면 대괄호 표기법 []을 사용하여 속성에 동적으로 액세스해야 합니다.

해결책:

ES6(또는 Babel/browserify와 같은 트랜스파일러) 사용, 아래와 같이 대괄호 표기법을 사용하여 동적 속성 이름으로 객체를 초기화할 수 있습니다.

iconMap : { 
    [KEYS.PHONE_TYPE] : 'icon-phone', 
    [KEYS.AGENT_TYPE] : 'icon-headphones'
};

여기서 코드에서 KEYS 속성 주위의 대괄호 []를 사용하면 KEYS 객체에 저장된 값을 기반으로 속성 이름을 동적으로 지정할 수 있습니다. 결과적으로 myAppConfig 객체의 iconMap 속성에는 원하는 값 매핑이 포함됩니다.

{
    'phone-type' : 'icon-phone',
    'agent-type' : 'icon-headphones'
}

위 내용은 동적 속성 이름을 사용하여 JavaScript 개체를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!