변수를 이름으로 사용하여 JavaScript 객체에 속성을 추가 하시겠습니까?


277

jQuery를 사용하여 DOM에서 항목을 가져오고 idDOM 요소를 사용하여 객체에 속성을 설정하려고합니다 .

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  // Here is the problem
  obj.name = value
})

"myId" itemsFromDom의 요소를 포함하는 경우 id"myId" obj라는 속성을 갖고 싶습니다 . 위의 내용은 저에게 name있습니다.

JavaScript를 사용하여 변수를 사용하여 객체의 속성 이름을 어떻게 지정합니까?



답변:


469

이 동등한 구문을 사용할 수 있습니다.

obj[name] = value

122

함께 ECMAScript를 2015 당신은 브래킷 표기법을 사용하여 객체 선언에서 직접 작업을 수행 할 수 있습니다

var obj = {
  [key]: value
}

경우 key(예 : 변수) 값을 반환 표현의 모든 종류의 수 있습니다 :

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}

13
이 질문은 새로운 객체를 생성하지 않고 기존 객체를 수정하는 것에 관한 것입니다.
Michał Perłakowski

28
이 특정 질문은 수정에 관한 것일 수도 있지만 동적으로 객체를 만드는 것과 관련된 다른 질문에 의해 참조되었으므로 여기서 끝났 으며이 답변에서 행복하게 혜택을 받았습니다.
Oliver Lloyd

2
@wOxxOm lol 그래, 내가 obj[name]=value대신 제안을 대신 사용할 수있을 때 번거 로움을 겪는 이유는 무엇입니까
-chiliNUT

2
ECMAScript 6이 무엇인지 잘 모르겠지만 대단히 감사합니다
Arthur Tarasov

2
@ArthurTarasov : ECMAScript 6은 ECMAScript 6 번째 버전 ( "ES6")이라고하는 공식적으로 ECMAScript 2015 ( "ES2015")라고합니다. 2015 년 6 월에 릴리스 된 JavaScript 사양입니다. 그 이후로 우리는 ES2016을 갖게되었고 곧 ES2017을 갖게 될 것입니다.
TJ Crowder

12

이런 식으로 객체 목록을 만들 수도 있습니다.

var feeTypeList = [];
$('#feeTypeTable > tbody > tr').each(function (i, el) {
    var feeType = {};

    var $ID = $(this).find("input[id^=txtFeeType]").attr('id');

    feeType["feeTypeID"] = $('#ddlTerm').val();
    feeType["feeTypeName"] = $('#ddlProgram').val();
    feeType["feeTypeDescription"] = $('#ddlBatch').val();

    feeTypeList.push(feeType);
});

6

객체 속성에 액세스하는 두 가지 표기법이 있습니다

  • 표기법 : myObj.prop1
  • 대괄호 표기법 : myObj [ "prop1"]

도트 표기법은 쉽고 빠르게하지만 당신은 있어야합니다 명시 적으로 실제 속성 이름을 사용합니다. 대체, 변수 등이 없습니다.

대괄호 표기법이 열려 있습니다. 문자열을 사용하지만 유효한 js 코드를 사용하여 문자열을 생성 할 수 있습니다. 문자열을 리터럴로 지정하거나 (이 경우 점 표기법이 더 읽기 쉽지만) 변수를 사용하거나 어떤 식 으로든 계산할 수 있습니다.

따라서 이들은 모두 prop1 이라는 myObj 속성을 Hello 값으로 설정합니다 .

// quick easy-on-the-eye dot notation
myObj.prop1 = "Hello";

// brackets+literal
myObj["prop1"] = "Hello";

// using a variable
var x = "prop1"; 
myObj[x] = "Hello";                     

// calculate the accessor string in some weird way
var numList = [0,1,2];
myObj[ "prop" + numList[1] ] = "Hello";     

함정 :

myObj.[xxxx] = "Hello";      // wrong: mixed notations, syntax fail
myObj[prop1] = "Hello";      // wrong: this expects a variable called prop1

tl; dnr : 키를 계산하거나 참조 하려면 대괄호 표기법사용해야합니다 . 키를 명시 적으로 사용하는 경우 간단한 명확한 코드 를 위해 점 표기법 을 사용하십시오 .

참고 : 다른 좋은 대답이 있지만 개인적으로 JS on-the-fly 기발한 지식에 대한 지식이 적다는 것을 개인적으로 발견했습니다. 이것은 일부 사람들에게 유용 할 수 있습니다.


3

lodash, 당신은이 같은 새로운 개체를 만들 수 있습니다 _.set를 :

obj = _.set({}, key, val);

또는 다음과 같이 기존 객체로 설정할 수 있습니다.

var existingObj = { a: 1 };
_.set(existingObj, 'a', 5); // existingObj will be: { a: 5 }

lodash는 다음과 같이 계층을 설정할 수 있으므로 경로에 점 ( ".")을 사용하려면주의해야합니다.

_.set({}, "a.b.c", "d"); // { "a": { "b": { "c": "d" } } }

2

먼저 키를 변수로 정의한 다음 키를 객체로 지정해야합니다.

var data = {key:'dynamic_key',value:'dynamic_value'}
var key = data.key;
var obj = { [key]: data.value}
console.log(obj)



0

객체에 동적으로 필드를 추가하려는 경우 가장 간단한 방법은 다음과 같습니다.

 var params= [
{key: "k1", value=1},
{key: "k2", value=2},
{key: "k3", value=3}];

for(i=0; i< params.len; i++) {
  data[params[i].key] = params[i].value
}

그러면 다음 필드가있는 데이터 객체가 생성됩니다.

{k1:1, k2:2, k3:3}

0

객체가있는 경우 매핑하는 것보다 키 배열을 만들고 이전 객체 키와 값에서 새 객체를 만들 수 있습니다.

Object.keys(myObject)
.map(el =>{
 const obj = {};
 obj[el]=myObject[el].code;
 console.log(obj);
});

0

자바 스크립트에는 자바 스크립트 객체 속성을 가져 오기위한 두 가지 유형의 주석이 있습니다.

Obj = {};

1) (.) 주석 예. Obj.id 객체에 이미 이름이 'id'인 속성이있는 경우에만 작동합니다

2) ([]) 주석 예. 객체에 이름이 'id'인 속성이없는 경우 이름이 'id'인 새 속성을 만듭니다.

아래 예제의 경우 :

Obj [name]을 쓸 때 항상 새 속성이 만들어집니다. 그리고 같은 이름의 속성이 이미 있으면 속성을 재정의합니다.

const obj = {}
    jQuery(itemsFromDom).each(function() {
      const element = jQuery(this)
      const name = element.attr('id')
      const value = element.attr('value')
      // This will work
      obj[name]= value;
    })

0

주제와 관련이 있지만 jquery에는 특별히 적합하지 않습니다. 나는 이것을 EC6 프로젝트에서 반응시켜 누군가를 도울 수 있습니다.

this.setState({ [`${name}`]: value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[name]));
    });

추신 : 따옴표 문자를 명심하십시오.



-2
const data = [{
    name: 'BMW',
    value: '25641'
  }, {
    name: 'Apple',
    value: '45876'
  },
  {
    name: 'Benz',
    value: '65784'
  },
  {
    name: 'Toyota',
    value: '254'
  }
]

const obj = {
  carsList: [{
    name: 'Ford',
    value: '47563'
  }, {
    name: 'Toyota',
    value: '254'
  }],
  pastriesList: [],
  fruitsList: [{
    name: 'Apple',
    value: '45876'
  }, {
    name: 'Pineapple',
    value: '84523'
  }]
}

let keys = Object.keys(obj);

result = {};

for(key of keys){
    let a =  [...data,...obj[key]];
    result[key] = a;

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