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

source

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

lovecheck 2022. 11. 19. 11:43

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()은 사용자가 지정한 값을 사용하는 경우 명백한 보안 문제가 있으므로 피할 수 있으면 사용하지 마십시오.그러나 이것이 존재하고 무엇을 할 수 있는지 알 필요가 있습니다.

이것은, 다음의 URL 로 참조할 수 있습니다.

alert(data.someProperty);

또는

data(data["someProperty"]);

또는

alert(data[propertyName]);

ES6는 계산된 속성 이름을 도입하여 다음을 수행할 수 있습니다.

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

질문에 대한 답변이 완벽하다는 것을 알지만, 새로운 속성을 추가할 수 있는 다른 방법을 찾아 귀하와 공유하고자 합니다.

때 이 할 수 .Object.defineProperty()

Mozilla Developer Network에서 찾을 수 있습니다.

예:

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

여기서는 표기법을 사용합니다.

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

동적 키의 경우.

위의 모든 답변과 더불어 향후 Computed Propert Names(ECMAScript 6)를 사용하여 다이내믹프로퍼티명을 작성하는 방법이 궁금할 경우 다음 방법을 참조하십시오.

var person = "John Doe";
var personId = "person_" + new Date().getTime();
var personIndex = {
    [ personId ]: person
//  ^ computed property name
};

personIndex[ personId ]; // "John Doe"

참조:ECMAScript 6에 대해서 - Nicolas Zakas

위에 있는 에이빙의 답변에 추가 사항입니다.다음과 같이 defineProperty의 복잡성을 캡슐화하는 함수를 정의할 수 있습니다.

var defineProp = function ( obj, key, value ){
  var config = {
    value: value,
    writable: true,
    enumerable: true,
    configurable: true
  };
  Object.defineProperty( obj, key, config );
};

//Call the method to add properties to any object
defineProp( data, "PropertyA",  1 );
defineProp( data, "PropertyB",  2 );
defineProp( data, "PropertyC",  3 );

레퍼런스: http://addyosmani.com/resources/essentialjsdesignpatterns/book/ #syslogorpatternjavascript

이 투고에 대한 답변은 이미 여러 개 있지만, 여러 속성이 있고 배열 내에 있는 것은 본 적이 없습니다.참고로 이 솔루션은 ES6용입니다.

예를 들어 person이라는 이름의 배열이 내부에 객체를 가지고 있다고 가정해 보겠습니다.

 let Person = [{id:1, Name: "John"}, {id:2, Name: "Susan"}, {id:3, Name: "Jet"}]

따라서 해당 값을 가진 속성을 추가할 수 있습니다.기본값이 EN인 언어를 추가한다고 가정합니다.

Person.map((obj)=>({...obj,['Language']:"EN"}))

현재 사용자 배열은 다음과 같습니다.

Person = [{id:1, Name: "John", Language:"EN"}, 
{id:2, Name: "Susan", Language:"EN"}, {id:3, Name: "Jet", Language:"EN"}]

런타임에 혼합된 새 속성을 추가하는 경우 유용합니다.

data = { ...data, newPropery: value}

단, 분산 연산자는 얕은 복사를 사용하지만 여기서는 데이터를 자신에게 할당하므로 손실은 없습니다.

에서 동적 할 수 (ES6 기능)은 하지 않습니다).... ★★★★★★★★★★★★★★★★★」[key]: value)

제가 생각해낸 것은 다음과 같습니다.

var obj = (obj = {}, obj[field] = 123, obj)

처음에는 조금 복잡해 보이지만, 정말 간단해요.쉼표 연산자를 사용하여 다음 3개의 명령을 연속으로 실행합니다.

obj = {}새: 에 합니다.obj
obj[field] = 123: 계산된 속성 이름을 에 추가합니다.obj
obj 라고 하다를 합니다.obj 결과

은 함수 할 수 .이러한 구문을 .이 구문은 다음과 같이 명확하게 선언할 필요가 없습니다.obj★★★★

// The test function to see the result.
function showObject(obj) {
    console.log(obj);
}

// My dynamic field name.
var field = "myDynamicField";

// Call the function with our dynamic object.
showObject( (obj = {}, obj[field] = 123, obj) );

/*
Output:

{
  "myDynamicField": true
}
*/

일부 변형

"syslog 모드" 회피책:

the the the the the 에서는 .strict mode'obj'라고 합니다.

// This gives the same result, but declares the global variable `this.obj`!
showObject( (this.obj = {}, obj[field] = 123, obj) );

이니셜라이저에서 계산된 속성 이름을 사용하는 ES2015 코드:

// Works in most browsers, same result as the other functions.
showObject( {[field] = 123} );

이 솔루션은 최신 브라우저에서는 모두 동작합니다(단, IE에서는 동작하지 않습니다).

`JSON.parse()`:

// Create a JSON string that is parsed instantly. Not recommended in most cases.
showObject( JSON.parse( '{"' + field +'":123}') );
// read: showObject( JSON.parse( '{"myDynamicfield":123}') );

키에 특수 문자 허용

계산된 속성 이름(및 JSON.parse) 내에 공백 및 기타 특수 문자를 사용할 수도 있습니다.

var field = 'my dynamic field :)';
showObject( {[field] = 123} );
// result: { "my dynamic field :)": 123 }

에는 점점)을 수 .obj.my dynamic field :)하지 않습니다). 단, ----notation the the the the the the the the the the the the the the the the the the the the the the the the the the the is is is is is is obj['my dynamic field :)']123

다음 옵션 중 일부를 사용하여 동적으로 속성을 추가할 수 있습니다.

이 예에서는 다음과 같습니다.

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

다음 두 가지 방법으로 동적 값을 사용하여 속성을 정의할 수 있습니다.

data.key = value;

또는

data['key'] = value;

더 많이...키가 동적인 경우에도 오브젝트 클래스를 사용하여 정의할 수 있습니다.

Object.defineProperty(data, key, withValue(value));

여기서 data는 객체, key는 키 이름을 저장할 변수, value는 값을 저장할 변수입니다.

도움이 됐으면 좋겠네요!

가장 간단하고 휴대하기 쉬운 방법은.

var varFieldName = "good";
var ob = {};
Object.defineProperty(ob, varFieldName , { value: "Fresh Value" });

#being 답변에 근거합니다!

.(닷) 메서드를 사용하여 기존 개체에 속성을 추가할 때는 주의하십시오.

오브젝트에 속성을 추가하는 방법(.dot)은 사전에 '키'를 알고 있는 경우에만 사용해야 하며, 그렇지 않은 경우에는 [key] 메서드를 사용해야 합니다.

예:

   var data = {
        'Property1': 1
    };
    
    // Two methods of adding a new property [ key (Property4), value (4) ] to the
    // existing object (data)
    data['Property2'] = 2; // bracket method
    data.Property3 = 3;    // dot method
    console.log(data);     // { Property1: 1, Property2: 2, Property3: 3 }
    
    // But if 'key' of a property is unknown and will be found / calculated
    // dynamically then use only [bracket] method not a dot method    
    var key;
    for(var i = 4; i < 6; ++i) {
    	key = 'Property' + i;     // Key - dynamically calculated
    	data[key] = i; // CORRECT !!!!
    }
    console.log(data); 
    // { Property1: 1, Property2: 2, Property3: 3, Property4: 4, Property5: 5 }
    
    for(var i = 6; i < 2000; ++i) {
    	key = 'Property' + i; // Key - dynamically calculated
    	data.key = i;         // WRONG !!!!!
    }
    console.log(data); 
    // { Property1: 1, Property2: 2, Property3: 3, 
    //   Property4: 4, Property5: 5, key: 1999 }

콘솔 로그의 끝에 Property 6: 6, Property 7: 7,..........,Property 1999: 1999가 아닌 'key: 1999'라는 문제가 있습니다.따라서 동적으로 생성된 속성을 추가하는 가장 좋은 방법은 [bracket] 메서드입니다.

오브젝트(오브젝트 등)를 포함하는 동적 문자열 이름에서 액세스하는 좋은 방법입니다.subobject.displays)를 참조해 주세요.

function ReadValue(varname)
{
    var v=varname.split(".");
    var o=window;
    if(!v.length)
        return undefined;
    for(var i=0;i<v.length-1;i++)
        o=o[v[i]];
    return o[v[v.length-1]];
}

function AssignValue(varname,value)
{
    var v=varname.split(".");
    var o=window;
    if(!v.length)
        return;
    for(var i=0;i<v.length-1;i++)
        o=o[v[i]];
    o[v[v.length-1]]=value;
}

예:

ReadValue("object.subobject.property");
WriteValue("object.subobject.property",5);

eval은 읽기 값에 대해 작동하지만 쓰기 값은 조금 어렵습니다.

고급 버전(서브클래스가 존재하지 않는 경우 하위 클래스를 만들고 전역 변수 대신 개체를 허용합니다.

function ReadValue(varname,o=window)
{
    if(typeof(varname)==="undefined" || typeof(o)==="undefined" || o===null)
        return undefined;
    var v=varname.split(".");
    if(!v.length)
        return undefined;
    for(var i=0;i<v.length-1;i++)
    {
        if(o[v[i]]===null || typeof(o[v[i]])==="undefined") 
            o[v[i]]={};
        o=o[v[i]];
    }
    if(typeof(o[v[v.length-1]])==="undefined")    
        return undefined;
    else    
        return o[v[v.length-1]];
}

function AssignValue(varname,value,o=window)
{
    if(typeof(varname)==="undefined" || typeof(o)==="undefined" || o===null)
        return;
    var v=varname.split(".");
    if(!v.length)
        return;
    for(var i=0;i<v.length-1;i++)
    {
        if(o[v[i]]===null || typeof(o[v[i]])==="undefined")
            o[v[i]]={};
        o=o[v[i]];
    }
    o[v[v.length-1]]=value;
}

예:

ReadValue("object.subobject.property",o);
WriteValue("object.subobject.property",5,o);

이것은 o.object와 동일합니다.서브오브젝트.개요

내가 문제를 해결한 방법은 이렇다.

var obj = {

};
var field = "someouter.someinner.someValue";
var value = 123;

function _addField( obj, field, value )
{
    // split the field into tokens
    var tokens = field.split( '.' );

    // if there's more than one token, this field is an object
    if( tokens.length > 1 )
    {
        var subObj = tokens[0];

        // define the object
        if( obj[ subObj ] !== undefined ) obj[ subObj ] = {};

        // call addfield again on the embedded object
        var firstDot = field.indexOf( '.' );
        _addField( obj[ subObj ], field.substr( firstDot + 1 ), value );

    }
    else
    {
        // no embedded objects, just field assignment
        obj[ field ] = value;
    }
}

_addField( obj, field, value );
_addField(obj, 'simpleString', 'string');

console.log( JSON.stringify( obj, null, 2 ) );

다음 개체를 생성합니다.

{
  "someouter": {
    "someinner": {
      "someValue": 123
    }
  },
  "simpleString": "string"
}

네, 가능합니다.이하의 실장을 사용해 달성했습니다.이를 위해 오브젝트에 속성 목록으로 원하는 어레이를 응답으로 가져옵니다.

response = {
  "equityMonths": [
    {
      "id": 1,
      "month": "JANUARY",
      "isEligible": false
    },
    {
      "id": 2,
      "month": "FEBRUARY",
      "isEligible": true
    },
    {
      "id": 3,
      "month": "MARCH",
      "isEligible": false
    },
    {
      "id": 4,
      "month": "APRIL",
      "isEligible": true
    },
    {
      "id": 5,
      "month": "MAY",
      "isEligible": false
    },
    {
      "id": 6,
      "month": "JUNE",
      "isEligible": true
    },
    {
      "id": 7,
      "month": "JULY",
      "isEligible": true
    },
    {
      "id": 8,
      "month": "AUGUST",
      "isEligible": false
    },
    {
      "id": 9,
      "month": "SEPTEMBER",
      "isEligible": true
    },
    {
      "id": 10,
      "month": "OCTOBER",
      "isEligible": false
    },
    {
      "id": 11,
      "month": "NOVEMBER",
      "isEligible": true
    },
    {
      "id": 12,
      "month": "DECEMBER",
      "isEligible": false
    }
  ]
}

여기, 나는 원한다equityMonths1월부터 12월까지가 포인트이고isEligible 가치 있는 것으로서.그러기 위해서는 오브젝트 클래스의defineProperty()동적 속성을 개체에 추가할 수 있는 메서드입니다.

오브젝트에 동적으로 속성을 추가하기 위한 코드입니다.

let equityMonth = new Object();

response.equityMonths.forEach(element => {
    Object.defineProperty(equityMonth, element['month'], {
       value: element['isEligible'],
       writable: true,
       enumerable: true,
       configurable: true
    });
});
console.log("DATA : " + JSON.stringify(equityMonth));

상기 코드에서는, 다음의 배열이 있습니다.equityMonths우리가 물건으로 바꿔놨어요

출력:

DATA : {"JANUARY":false,"FEBRUARY":true,"MARCH":false,"APRIL":true,"MAY":false,"JUNE":true,"JULY":true,"AUGUST":false,"SEPTEMBER":true,"OCTOBER":false,"NOVEMBER":true,"DECEMBER":false}

완전 쉬운 방법

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

var newProperty = 'getThisFromUser';
data[newProperty] = 4;

console.log(data);

데이터 배열(ES6/TS 버전)에 적용하는 경우

const data = [
  { 'PropertyA': 1, 'PropertyB': 2, 'PropertyC': 3 },
  { 'PropertyA': 11, 'PropertyB': 22, 'PropertyC': 33 }
];

const newProperty = 'getThisFromUser';
data.map( (d) => d[newProperty] = 4 );

console.log(data);

물론입니다.사전 또는 연관 배열이라고 생각하십시오.언제든지 추가할 수 있습니다.

언급URL : https://stackoverflow.com/questions/1184123/is-it-possible-to-add-dynamically-named-properties-to-javascript-object

'source' 카테고리의 다른 글

PHP 오류: "참조 기준으로 매개 변수 2를 전달할 수 없습니다." (0)	2022.11.19
Java용 SSH 라이브러리 (0)	2022.11.19
PHP Try Catch 블록에 예외 발생 (0)	2022.11.19
Eclipse에서 조건부 중단점을 사용하는 방법은 무엇입니까? (0)	2022.11.18
특정 카디널리티를 가진 sql 쿼리(다대다) (0)	2022.11.18

현재글JavaScript 객체에 동적으로 명명된 속성을 추가할 수 있습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

C, ASP.NET, AJAX, Excel, JQuery, sql-server, reactjs, mariaDB, AngularJS, Wordpress, JSON, PHP, oracle, javascript, Python, git, mysql, spring-boot, java, WPF,

Today :
Yesterday :

lovecheck

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

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

일부 변형

"syslog 모드" 회피책:

이니셜라이저에서 계산된 속성 이름을 사용하는 ES2015 코드:

`JSON.parse()`:

키에 특수 문자 허용

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

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

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

일부 변형

"syslog 모드" 회피책:

이니셜라이저에서 계산된 속성 이름을 사용하는 ES2015 코드:

JSON.parse():

키에 특수 문자 허용

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바

`JSON.parse()`: