JavaScript 개체 리터럴에서 속성 이름을 어떻게 동적으로 할당합니까?

JavaScript에서 객체 리터럴의 동작 이해

JavaScript에서 객체 리터럴을 사용하여 작업할 때 개발자는 속성 이름을 동적으로 정의하는 것이 바람직한 상황에 직면할 수 있습니다. 그러나 의도한 동작이 이해되지 않으면 혼란을 초래할 수 있습니다.

제공된 예를 고려하십시오.

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

이 경우 코드는 'top' 속성을 객체 리터럴 내 값 10. 이는 속성 이름이 작은따옴표로 묶여 리터럴 문자열이 속성 키임을 나타내기 때문입니다.

반대로 변수를 속성 이름으로 사용하는 경우:

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

코드 JavaScript는 이러한 방식으로 객체 리터럴에 대해 동적으로 생성된 속성 이름을 지원하지 않기 때문에 실패합니다. ES5 이전에는 이를 달성하는 유일한 방법은 변수 속성 이름에 값을 할당하여 객체 리터럴을 수동으로 구성하는 것이었습니다.

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

그러나 ES6이 도입되면서 이제 개발자는 Computed에 액세스할 수 있습니다. 객체 리터럴의 속성 이름. 이 새로운 구문을 사용하면 속성 이름을 대괄호로 묶은 표현식으로 동적으로 지정할 수 있습니다.

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

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

이 구문을 사용하면 개발자는 리터럴 문자열을 사용한 원래 예와 마찬가지로 동적으로 할당된 속성 이름을 사용하여 객체 리터럴을 생성할 수 있습니다. 속성 키로 사용하세요.

위 내용은 JavaScript 개체 리터럴에서 속성 이름을 어떻게 동적으로 할당합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!