JavaScript 개체 리터럴에서 변수를 개체 키로 어떻게 사용할 수 있습니까?

JavaScript 리터럴에서 변수를 객체 키로 사용

JavaScript에서는 키-값 쌍을 사용하여 객체 리터럴을 정의할 수 있습니다. 그러나 변수를 키로 사용하려고 하면 특정 제한 사항이 존재합니다.

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

<something>.stop().animate({ 'top' : 10 }, 10);

이 코드는 요소의 "top" CSS 속성을 성공적으로 업데이트합니다. . 그러나 변수를 대신 사용하려고 하면

var thetop = 'top';
<something>.stop().animate({ thetop : 10 }, 10);

코드가 실패합니다. 그 이유는 객체 리터럴에서는 키를 작은따옴표나 큰따옴표로 묶어야 하지만 변수 이름은 그럴 수 없기 때문입니다.

ES5 및 이전 버전:

ES5 및 이전 버전 JavaScript에는 변수를 객체 키로 직접 사용하는 간단한 방법이 없습니다. 한 가지 해결 방법은 빈 개체 리터럴을 만든 다음 원하는 키에 변수를 할당하는 것입니다.

var thetop = "top";

// Create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 이상:

ES6에는 ComputedPropertyName 구문이 도입되었습니다. 변수 표현식을 객체 키로 사용할 수 있습니다.

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

이 구문을 사용하면 더 깔끔하고 특히 동적 개체 키를 처리할 때 더욱 간결한 코드가 필요합니다. 모든 주요 브라우저의 최신 버전에서 지원됩니다.

위 내용은 JavaScript 개체 리터럴에서 변수를 개체 키로 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!