JavaScript가 객체 리터럴의 동적 객체 키를 직접 허용하지 않는 이유는 무엇입니까?

변수 수수께끼의 JavaScript 객체 키

JavaScript에서 객체 리터럴을 사용할 때 변수를 동적 변수에 할당하는 특이한 동작에 직면할 수 있습니다. 속성 키가 작동하지 않습니다. 다음 두 코드 조각을 고려하십시오.

<something>.stop().animate({ 'top': 10 }, 10); // Works
var thetop = 'top';
<something>.stop().animate({ thetop: 10 }, 10); // Doesn't work

왜 불일치합니까?

첫 번째 조각은 점 표기법을 활용하여 개체의 "top" 속성을 성공적으로 설정합니다. 그러나 두 번째 스니펫은 실패합니다. JavaScript에서는 변수를 사용하여 객체 리터럴에서 동적 객체 속성 이름을 직접 정의하는 것을 허용하지 않기 때문입니다.

ES5 및 이전 버전의 솔루션

동적 할당 ES5 및 이전 버전의 변수에서 속성 이름을 사용하려면 객체 리터럴을 구성해야 합니다. 수동:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to variable property name
<something>.stop().animate(aniArgs, 10);

ES6 이상의 솔루션

ES6에서는 객체 리터럴 문법에 "ComputePropertyName"을 도입하여 변수에서 직접 동적 속성 이름을 할당할 수 있습니다.

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

이 구문은 최신 버전의 주요 브라우저에서 지원됩니다.

위 내용은 JavaScript가 객체 리터럴의 동적 객체 키를 직접 허용하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!