어떻게 자바 스크립트 객체 리터럴의 키에 대한 변수를 사용하는 방법?

해결법

1.{최고 : 10} 유효한 오브젝트 리터럴입니다. 코드 (10) 다음 두 가지의 값이 정상이 동일이라는 속성을 가진 객체를 생성합니다 :

{최고 : 10} 유효한 오브젝트 리터럴입니다. 코드 (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
```
각 주류 브라우저의 최신 버전에서이 새로운 구문을 사용할 수 있습니다.
2.ECMAScript를 2015으로 이제 괄호 표기와 객체 선언에서 직접 할 수 있습니다 :

ECMAScript를 2015으로 이제 괄호 표기와 객체 선언에서 직접 할 수 있습니다 :
```
var obj = {
  [key]: value
}
```
키 값을 반환 식의 어떤 종류 (예를 들면 변수)가 될 수 있습니다.

여기에 귀하의 코드는 같을 것이다 :
```
<something>.stop().animate({
  [thetop]: 10
}, 10)
```
어디 thetop는 키로서 사용되기 전에 평가됩니다.
3.ES5가 인용 말한다 작동하지해야

ES5가 인용 말한다 작동하지해야

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

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

이 의미 :
4.나는 객체에 "동적"이름을 가진 속성을 추가하려면 다음을 사용하고 있습니다 :

나는 객체에 "동적"이름을 가진 속성을 추가하려면 다음을 사용하고 있습니다 :
```
var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);
```
키는 새 속성의 이름입니다.

애니메이션 통과 속성의 객체가 될 것이다 {왼쪽 : 20, 폭 : 100, 상위 10}

하지만 적은 코드로, 다른 답변에서 권장하는이 단지 필요 [] 표기법을 사용하고 있습니다!
5.변수 주위에 대괄호를 추가하면 나를 위해 잘 작동합니다. 이 시도

변수 주위에 대괄호를 추가하면 나를 위해 잘 작동합니다. 이 시도
```
var thetop = 'top';
<something>.stop().animate(
    { [thetop] : 10 }, 10
);
```
6.내가 일을했다, 그래서 나는 ES6과 ES5의 차이점에 대한 간단한 예를 찾을 수 없습니다. 두 코드 샘플은 정확히 동일한 개체를 만듭니다. ES6의 예를하지 않는 알의 그러나 ES5의 예는, (IE11 등) 이전 버전의 브라우저에서 작동합니다.

내가 일을했다, 그래서 나는 ES6과 ES5의 차이점에 대한 간단한 예를 찾을 수 없습니다. 두 코드 샘플은 정확히 동일한 개체를 만듭니다. ES6의 예를하지 않는 알의 그러나 ES5의 예는, (IE11 등) 이전 버전의 브라우저에서 작동합니다.

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));
```

7.주어 코드 :

주어 코드 :

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

번역:

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

당신이 볼 수 있듯이, {thetop : 10} 선언은 변수 thetop를 사용하지 않습니다. 대신은 thetop라는 이름의 키를 가진 개체를 만듭니다. 당신은 키가 변수 thetop의 값 싶은 경우에, 당신은 thetop 대괄호를 사용해야합니다 :

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

대괄호 구문은 ES6 도입되었습니다. 자바 스크립트의 이전 버전에서는 다음을 수행해야합니다 :

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

8.2020 업데이 트 / 예 ...

2020 업데이 트 / 예 ...

더 복잡한 예는 브래킷과 리터럴 ... 뭔가를 사용하여 당신은 VUE / Axios의와 예를 들어 수행 할 수 있습니다. 그래서, 괄호의 문자를 감싸
```
{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}
```
9.할당 키에 ES5 구현은 다음과 같습니다 :

할당 키에 ES5 구현은 다음과 같습니다 :
```
var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: 'someValue'
      }), objArgs);

Object.defineProperties(obj, objArgs);
```
나는 개체를 맨발로 변환하는 데 사용되는 조각을 첨부했습니다.

VAR OBJ = { '키 1': '값 1', '키 2': '값 2', 'KEY3'[ 'VALUE3' 'VALUE4' ], 'KEY4': { 'key5': 'VALUE5' } } VAR bareObj = 함수 (OBJ) { VAR objArgs, bareObj = Object.create (NULL); Object.entries (OBJ) .forEach (함수 ([키 값]) { VAR objArgs = ( (objArgs = {}), (objArgs [키] = { 값 : 값 }) objArgs); Object.defineProperties (bareObj, objArgs); }); 반환 { 입력 : OBJ, 출력 : bareObj }; } (OBJ); 만약 (! Object.entries) { Object.entries = 함수 (OBJ) { VAR의 도착 = []; Object.keys (OBJ) .forEach (함수 (키) { arr.push ([키, OBJ [키]); }); 편곡 반환; } } 콘솔 (bareObj);
10.당신이 개체의 키 변수 이름과 동일 할 경우, ES 2015 년 짧은 손이있다. ECMAScript를 2015 년 새로운 표기법

당신이 개체의 키 변수 이름과 동일 할 경우, ES 2015 년 짧은 손이있다. ECMAScript를 2015 년 새로운 표기법
```
var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10
```
11.당신은이 방법을 수행 할 수 있습니다 :

당신은이 방법을 수행 할 수 있습니다 :
```
var thetop = 'top';
<something>.stop().animate(
    new function() {this[thetop] = 10;}, 10
);
```
12.당신은 또한이 같은 시도 할 수 있습니다 :

당신은 또한이 같은 시도 할 수 있습니다 :

{[= 배열 1하자 "설명": "목요일" "계산": "1" "날짜": "2019년 12월 5일" }, { "설명": "수요일" "계산": "0", "날짜": "2019년 12월 4일" }] {입술 array1.map = ((값, 인덱스) =>하자 반환 {[value.description] : {수 : value.count, 날짜 : value.date}} }) CONSOLE.LOG (해상도);
13.나는이 아직 게시되지 않은 믿을 수 없다 : 그냥 사용 화살표 표기법을 익명의 평가와 함께!

나는이 아직 게시되지 않은 믿을 수 없다 : 그냥 사용 화살표 표기법을 익명의 평가와 함께!

완전히 비 침습적, 네임 스페이스하지 엉망 않습니다, 그것은 단지 하나 개의 라인을합니다 :
```
myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
```
데모:

VAR의 mykey = "valueof_myKey"; VAR myValue = "valueof_myValue"; VAR myNewObj = ((K, V) => {O = {} O [K] = V, O 반환}) (의 mykey, myValue); CONSOLE.LOG (myNewObj);

새로운 {[의 mykey]} myValue 지원하지 않는 환경에서 유용 등-명백하게, 아무런 구문; 난 그냥 2020년 1월 8일 풀어 내 웹 개발자 콘솔 - 파이어 폭스 72.0.1, 그것을 확인했습니다.

(난 당신이 잠재적으로 좀 더 강력한 / 확장 가능한 솔루션을 만들 수있는 확신 또는 감소의 현명한 사용을 포함 어떤하지만 그 시점에서 당신은 아마 조금만 더 강박 적으로 방해하는 대신 자신의 함수로 객체 생성을 파괴함으로써 제공 될 것 모든 인라인)

하지 영업 이익이 10 년 전 물었지만, 완성도 '술과 정확히, 나는 원본 문장이 보여주지 언급 한 바와 같이 질문에 대한 답변입니다 방법을 설명하기 때문에 그것이 중요한 것은 :
```
var thetop = 'top';
<something>.stop().animate(
    ((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);
```
14./ 2020 ES6

/ 2020 ES6

사용 객체에 푸시 데이터를하려는 경우 : 다른 소스에서 "키 값을", 다음과 같이 사용할 수 있습니다 :
```
let obj = {}
let key = "foo"
let value = "bar"

obj[`${key}`] = value

// A `console.log(obj)` would return:
// {foo: "bar}

// A `typeof obj` would return:
// "object"
```
이 사람을 도움이되기를 바랍니다 :)
15.당신은 출력을 원하는 달성 할 수있다 또한이 방법

당신은 출력을 원하는 달성 할 수있다 또한이 방법

var에 jsonobj = {}; VAR 카운트 = 0; $ (문서) CSTE 연구진 ( '#이 btnadd'기능을 '클릭'() { jsonobj [카운트] 새로운 배열 = ({ "1"$ ( "#의 txtone") 발 ().}, { "2". $ ( "#의 txttwo") 발 ()}); ++ 계산; console.clear (); CONSOLE.LOG (jsonobj); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 값 1 <입력 ID = "txtone"TYPE = "텍스트"/> 값이 2 <입력 ID = "txttwo"TYPE = "텍스트"/> 추가 <버튼 ID는 = "btnadd">

16.당신은 ES5에 대해 다음 작업을 수행 할 수 있습니다 :

당신은 ES5에 대해 다음 작업을 수행 할 수 있습니다 :

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

또는 함수에 추출 :

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

from https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 문자열 경로에 의해 중첩 된 자바 스크립트 객체와 배열 액세스 (0)	2020.09.20
[JQUERY] 선택 및 이전 등 :: CSS 의사 요소를 조작하고 :: jQuery를 사용 후 (0)	2020.09.20
[JQUERY] 에서는 event.preventDefault () 대 리턴 거짓 (0)	2020.09.20
[JQUERY] 어떻게 다른 웹 페이지로 리디렉션합니까? (0)	2020.09.20
[JQUERY] .attr VS .prop () (0)	2020.09.20

복붙노트

[JQUERY] 어떻게 자바 스크립트 객체 리터럴의 키에 대한 변수를 사용하는 방법?

어떻게 자바 스크립트 객체 리터럴의 키에 대한 변수를 사용하는 방법?

해결법

1.{최고 : 10} 유효한 오브젝트 리터럴입니다. 코드 (10) 다음 두 가지의 값이 정상이 동일이라는 속성을 가진 객체를 생성합니다 :

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

3.ES5가 인용 말한다 작동하지해야

4.나는 객체에 "동적"이름을 가진 속성을 추가하려면 다음을 사용하고 있습니다 :

5.변수 주위에 대괄호를 추가하면 나를 위해 잘 작동합니다. 이 시도

7.주어 코드 :

8.2020 업데이 트 / 예 ...

9.할당 키에 ES5 구현은 다음과 같습니다 :

10.당신이 개체의 키 변수 이름과 동일 할 경우, ES 2015 년 짧은 손이있다. ECMAScript를 2015 년 새로운 표기법

11.당신은이 방법을 수행 할 수 있습니다 :

12.당신은 또한이 같은 시도 할 수 있습니다 :

13.나는이 아직 게시되지 않은 믿을 수 없다 : 그냥 사용 화살표 표기법을 익명의 평가와 함께!

14./ 2020 ES6

15.당신은 출력을 원하는 달성 할 수있다 또한이 방법

16.당신은 ES5에 대해 다음 작업을 수행 할 수 있습니다 :

'JQUERY' 카테고리의 다른 글

티스토리툴바