변수에서 JS 객체 속성 이름을 설정하는 방법


178

JS 객체 속성 이름을 동적으로 설정해야합니다.

for(i=1; i<3; i++) {
    var key  = i+'name';

    data = {
        key : 'name1',
    }
}

결과는 다음과 같아야합니다.

data = {
    1name: 'name1'
    2name: 'name1'
}

순차적 인 경우 왜 어레이를 사용하지 않습니까?
epascarello

어느 세 사람이 잘못된 화살을 쳤는지 알고 싶습니다. 시몬.
Charles

답변:


194
var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}

4
아래의 Musa의 답변은 또한 [] 표기법을 사용하는 것이 실제로 그것을 할 수있는 유일한 방법이라는 것을 정확하게 보여줍니다.
Dennis Plucinik

1
또한 @ChilNut의 응답은 이제 ES6를 사용하여 가장 쉬운 방법을 설명합니다.
rambossa

1
실제로 새 구문을 사용하면 OP가 달성하려고하는 것은 루프 제한이 하드 코딩되고 작은 경우에만 가능합니다.
Musa

168

[]키를 동적으로 설정 하려면 표기법 을 사용해야 합니다.

var jsonVariable = {};
for(i=1; i<3; i++) {        
 var jsonKey  = i+'name';
 jsonVariable[jsonKey] = 'name1';

}

이제 ES6에서는 객체 리터럴 구문을 사용하여 객체 키를 동적으로 만들 수 있습니다. []

var key  = i + 'name';
data = {
    [key] : 'name1',
}

3
jsonVariable = {}; for 루프 안에서 초기화해서는 안됩니다.
폐쇄

또한 여기 jsonVariable 글로벌 만들고있어
데니스 Plucinik

130

ECMAScript 6을 사용하면 다음과 같이 변수 리터럴 이름을 객체 리터럴 구문과 함께 사용할 수 있습니다.

var keyName = 'myKey';
var obj = {
              [keyName]: 1
          };
obj.myKey;//1

이 구문은 다음과 같은 최신 브라우저에서 사용할 수 있습니다.

Edge 12+ (IE 지원 안 함), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

( https://kangax.github.io/compat-table/es6/ )

babel 과 같은 변환기 를 사용하여 이전 브라우저에 대한 지원을 추가 할 수 있습니다 . rollup 또는 webpack 과 같은 모듈 번 들러를 사용하는 경우 전체 프로젝트를 쉽게 처리 할 수 ​​있습니다 .


2
멋진 ES6 구문을 추가해 주셔서 감사합니다
rambossa

ES6이 없으면 var payload = {dynamicKey : val}을 정의 할 수 없으며 var payload = {} 및 payload [variableName] = val을 수행해야합니다.
Sainath SR

23

이것이 동적으로 값을 설정하는 방법입니다

var jsonVariable = {};
for (var i = 1; i < 3; i++) {
    var jsonKey = i + 'name';
    jsonVariable[jsonKey] = 'name' + i;
}


7

변수의 출처는 중요하지 않습니다. 가장 중요한 것은 ... 대괄호 "[..]"사이에 변수 이름을 설정하십시오.

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}

잘 작동합니다. 모든 브라우저 / 버전에서 작동하는지 궁금합니다.
Mercury

1
jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

이것은 다음과 유사합니다

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}

0

위의 Sainath SR의 의견에 따라 객체를 정의한 다음 객체 외부에서 다른 키 / 값을 정의하여 Google Apps 스크립트 (아직 ES6를 지원하지 않음)의 변수에서 js 객체 속성 이름을 설정할 수있었습니다.

var salesperson = ...

var mailchimpInterests = { 
        "aGroupId": true,
    };

mailchimpInterests[salesperson] = true;
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.