런타임에 동적 속성 이름을 사용하여 JavaScript 개체를 어떻게 만들 수 있나요?

객체 생성에 동적 속성 이름 사용

프로그래밍에서는 런타임까지 알려지지 않은 속성 이름을 사용하여 객체를 생성하는 것이 유용할 수 있습니다. 이 글에서는 간접(리터럴이 아닌) 키 이름을 사용하여 객체를 초기화하는 문제를 다룹니다.

문제: 정적 속성 이름

전통적으로 JavaScript 객체는 고정된 리터럴 속성 이름으로 초기화됩니다.

var myAppConfig = {
    iconMap: {
        "phone-type": "icon-phone",
        "agent-type": "icon-headphones"
    }
};

그러나 특정 시나리오에서는 동적 속성 이름이 필요합니다. 예를 들어, 속성 이름은 다른 객체에 저장될 수 있습니다.

ES6 계산된 속성 이름 사용

ES6 또는 Babel과 같은 트랜스파일러를 사용하는 경우 계산된 속성 이름을 활용할 수 있습니다.

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

이 구문에서는 속성 이름이 대괄호로 묶여 표현식으로 평가됩니다. KEYS.PHONE_TYPE 값은 첫 번째 키-값 쌍의 속성 이름으로 사용됩니다.

출력:

결과적으로 iconMap 객체는 예상되는 동적 속성 이름으로 초기화됩니다. :

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

이 접근 방식을 사용하면 런타임에 리터럴이 아닌 속성 이름을 사용하여 객체를 생성할 수 있어 유연성과 코드가 향상됩니다. 적응력.

위 내용은 런타임에 동적 속성 이름을 사용하여 JavaScript 개체를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!