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

JavaScript 객체 리터럴의 동적 키-값 할당

애니메이션에서 널리 사용됨에도 불구하고 JavaScript는 변수 활용에 있어서 어려움을 겪고 있습니다. 객체 리터럴 내의 키로. ".stop().animate({ 'top' : 10 }, 10);"과 같은 구문은 "var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);"과 같이 변수를 키로 사용하려고 시도하면서 따옴표로 묶인 키에 값을 원활하게 할당하지만 실패합니다. .

불일치의 원인

{ thetop : 10 } 구성 유효한 객체 리터럴 구문. 코드는 JavaScript에 thetop이라는 속성을 사용하여 객체를 생성하고 값 10을 할당하도록 지시합니다. 특히 { thetop : 10 } 및 { "thetop" : 10 } 모두 동일한 객체 구조를 생성합니다.

ES5 이하의 한계를 극복

ES6 이전에는 변수를 다음과 같이 활용했습니다. 객체 리터럴 내의 속성 이름은 불가능했습니다. 해결 방법은 먼저 객체 리터럴을 생성한 다음 변수를 키로 사용하여 해당 속성에 값을 할당하는 것이었습니다. 예를 들면 다음과 같습니다.

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(aniArgs, 10);

ES6 및 계산된 속성 이름의 출현

ES6는 객체 리터럴 구문에 ComputedPropertyNames를 도입하여 이러한 환경에 혁명을 일으켰습니다. 이러한 발전을 통해 다음과 유사한 코딩이 가능해졌습니다.

var thetop = "top", obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

이 현대화된 구문을 통해 개발자는 최신 버전의 주류 브라우저에서 객체 리터럴의 속성 이름으로 변수를 원활하게 사용할 수 있습니다.

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