[javascript] JavaScript 객체 리터럴에서 키에 변수를 사용하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

다음은 왜 작동합니까?

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

작동하지 않는 반면 :

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

더 명확하게하기 위해 : 현재 CSS 속성을 변수로 애니메이션 함수에 전달할 수 없습니다.

답변

{ thetop : 10 }유효한 객체 리터럴입니다. 이 코드는 thetop값이 10 인 이름의 속성을 가진 객체를 만듭니다 . 다음 둘 다 동일합니다.

obj = { thetop : 10 };
obj = { "thetop" : 10 };

ES5 및 이전 버전에서는 변수를 객체 리터럴 내에서 속성 이름으로 사용할 수 없습니다. 유일한 옵션은 다음을 수행하는 것입니다.

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 는 ComputedPropertyName 을 객체 리터럴 문법의 일부로 정의 하므로 다음과 같은 코드를 작성할 수 있습니다.

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

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

이 새로운 구문을 각 주류 브라우저의 최신 버전에서 사용할 수 있습니다.

답변

함께 ECMAScript를 2015 이제 괄호 표기와 객체 선언에서 직접 할 수 있습니다 : 

var obj = {
  [key]: value
}

어디에서 key값을 반환 표현의 모든 종류 (예 : 변수)가 될 수 있습니다.

따라서 코드는 다음과 같습니다.

<something>.stop().animate({
  [thetop]: 10
}, 10)

어디 thetop키로 사용하기 전에 평가됩니다.

답변

작동하지 않아야한다고 말하는 ES5 인용문

참고 : ES6에 대한 규칙이 변경되었습니다. https://stackoverflow.com/a/2274327/895245

사양 : http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

PropertyName :

  • 식별자 이름
  • 문자열 리터럴
  • 숫자 리터럴

[…]

프로덕션 PropertyName : IdentifierName은 다음과 같이 평가됩니다.

  1. IdentifierName과 동일한 문자 시퀀스를 포함하는 문자열 값을 반환합니다.

프로덕션 PropertyName : StringLiteral은 다음과 같이 평가됩니다.

  1. StringLiteral의 SV [문자열 값]을 반환합니다.

프로덕션 PropertyName : NumericLiteral은 다음과 같이 평가됩니다.

  1. nbr은 NumericLiteral의 값을 형성 한 결과입니다.
  2. ToString (nbr)을 반환합니다.

이것은 다음을 의미합니다.

  • { theTop : 10 } 정확히 { 'theTop' : 10 }

    은 PropertyName theTop입니다. IdentifierName따라서 'theTop'문자열 값인 문자열 값으로 변환됩니다 'theTop'.

  • 변수 키를 사용하여 객체 이니셜 라이저 (리터럴)를 작성할 수 없습니다.

    유일하게 세 가지 옵션은 IdentifierName(문자열 리터럴로 확장) StringLiteral, 및 NumericLiteral(또한 문자열로 확장)입니다.

답변

다음을 사용하여 객체에 “동적”이름을 가진 속성을 추가했습니다.

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key 새 속성의 이름입니다.

속성의 목적은 전달 animate될 것입니다{left: 20, width: 100, top: 10}

이것은 []다른 답변에서 권장 하는 필수 표기법을 사용 하지만 코드 줄이 더 적습니다!

답변

변수 주위에 대괄호를 추가하면 나에게 효과적입니다. 이 시도

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

답변

ES6과 ES5의 차이점에 대한 간단한 예를 찾을 수 없으므로 하나를 만들었습니다. 두 코드 샘플 모두 정확히 동일한 객체를 만듭니다. 그러나 ES5 예제는 IE11과 같은 오래된 브라우저에서도 작동하지만 ES6 예제는 그렇지 않습니다.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

답변

2020 업데이트 / 예제 …

괄호와 리터럴을 사용하는 더 복잡한 예 … 예를 들어 vue / axios와 관련이있을 수 있습니다. 리터럴을 괄호로 묶으십시오.

[`…`]

{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}