[javascript] JavaScript 객체에 동적으로 명명 된 속성을 추가 할 수 있습니까?

JavaScript에서 다음과 같은 객체를 만들었습니다.

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};

런타임까지 속성 이름이 결정되지 않은 경우 처음 생성 한 후이 객체에 속성을 추가 할 수 있습니까? 즉

var propName = 'Property' + someUserInput
//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to 
//my object?

답변

예.

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};

data["PropertyD"] = 4;

// dialog box with 4 in it
alert(data.PropertyD);
alert(data["PropertyD"]);

스 니펫 확장

답변

승리를위한 ES6!

const b = 'b';
const c = 'c';

const data = {
    a: true,
    [b]: true, // dynamic property
    [`interpolated-${c}`]: true, // dynamic property + interpolation
    [`${b}-${c}`]: true
}

로그인 data하면 다음을 얻습니다.

{
  a: true,
  b: true,
  interpolated-c: true,
  b-c: true
}

새로운 계산 속성 구문과 템플릿 리터럴을 사용 합니다.

답변

네 가능합니다. 가정 :

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
var propertyName = "someProperty";
var propertyValue = "someValue";

어느 한 쪽:

data[propertyName] = propertyValue;

또는

eval("data." + propertyName + " = '" + propertyValue + "'");

첫 번째 방법이 선호됩니다. eval ()은 사용자가 제공 한 값을 사용하는 경우 명백한 보안 문제가 있으므로 피할 수 있으면 사용하지 말고 존재하고 무엇을 할 수 있는지 아는 것이 좋습니다.

이것을 다음과 같이 참조 할 수 있습니다.

alert(data.someProperty);

또는

data(data["someProperty"]);

또는

alert(data[propertyName]);

답변

질문에 완벽하게 답변했지만 새로운 속성을 추가하는 다른 방법을 찾아서 공유하고 싶었습니다.

당신은 기능을 사용할 수 있습니다 Object.defineProperty()

Mozilla 개발자 네트워크 에서 발견

예:

var o = {}; // Creates a new object

// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});
// 'a' property exists in the o object and its value is 37

// Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});
o.b = 38;
// 'b' property exists in the o object and its value is 38
// The value of o.b is now always identical to bValue, unless o.b is redefined

// You cannot try to mix both :
Object.defineProperty(o, "conflict", { value: 0x9f91102,
                                       get: function() { return 0xdeadbeef; } });
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors

답변

ES6는 계산 된 속성 이름을 소개합니다.

let a = 'key'
let myObj = {[a]: 10};
// output will be {key:10}

답변

여기에 표기법을 사용하십시오.

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
var propName = 'Property' + someUserInput
//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to 
//my object?
data[propName] = 'Some New Property value'

답변

점 표기법을 사용하여 원하는만큼 더 많은 속성을 추가 할 수 있습니다.

var data = {
    var1:'somevalue'
}
data.newAttribute = 'newvalue'

또는 :

data[newattribute] = somevalue

동적 키용.