เป็นไปได้หรือไม่ที่จะเพิ่มคุณสมบัติที่ตั้งชื่อแบบไดนามิกไปยังวัตถุ 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
}

นี้จะทำให้การใช้งานของใหม่Computed ทรัพย์สินไวยากรณ์และแม่แบบตัวอักษร

ใช่มันเป็นไปได้ สมมติว่า:

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 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

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

สำหรับปุ่มแบบไดนามิก

นอกเหนือจากคำตอบก่อนหน้าทั้งหมดและในกรณีที่คุณสงสัยว่าเราจะเขียนชื่อคุณสมบัติแบบไดนามิกในอนาคตโดยใช้ชื่อคุณสมบัติที่คำนวณ (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 - Nickolas Zakas

เป็นเพียงการเพิ่มคำตอบของ abeing ด้านบน คุณสามารถกำหนดฟังก์ชั่นเพื่อสรุปความซับซ้อนของ 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/#constructorpatternjavascript

คุณสามารถเพิ่มคุณสมบัติแบบไดนามิกโดยใช้ตัวเลือกบางตัวด้านล่าง:

ในตัวอย่างของคุณ:

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

คุณสามารถกำหนดคุณสมบัติด้วยค่าแบบไดนามิกในอีกสองวิธี:

data.key = value;

หรือ

data['key'] = value;

เพิ่มเติม .. ถ้ากุญแจของคุณเป็นแบบไดนามิกคุณสามารถกำหนดโดยใช้คลาส Object ด้วย:

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

โดยที่dataคือวัตถุของคุณkeyคือตัวแปรที่ใช้เก็บชื่อคีย์และค่าเป็นตัวแปรในการเก็บค่า

ฉันหวังว่านี่จะช่วยได้!

ฉันรู้ว่ามีคำตอบหลายข้อสำหรับโพสต์นี้แล้ว แต่ฉันไม่เห็นคำตอบที่มีคุณสมบัติหลายอย่างและอยู่ในอาร์เรย์ และวิธีแก้ปัญหานี้สำหรับ ES6

สำหรับภาพประกอบสมมติว่าเรามีอาร์เรย์ชื่อบุคคลที่มีวัตถุอยู่ภายใน:

 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"}]

วิธีที่ง่ายและสะดวกที่สุดคือ

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

ตามคำตอบ #abeing!

โปรดใช้ความระมัดระวังขณะที่การเพิ่มคุณสมบัติที่จะวัตถุที่มีอยู่โดยใช้. (จุด)วิธีการ

(.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 }

หมายเหตุปัญหาในตอนท้ายของบันทึกคอนโซล - 'สำคัญ: 1999'แทนProperty6: 6, Property7: 7 ......... , Property1999: 1999 วิธีที่ดีที่สุดในการเพิ่มคุณสมบัติที่สร้างขึ้นแบบไดนามิกคือวิธี [วงเล็บ]

วิธีที่ดีในการเข้าถึงจากชื่อสตริงแบบไดนามิกที่มีวัตถุ (เช่น object.subobject.property)

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.subobject.property

นี่คือวิธีที่ฉันแก้ปัญหา

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"
}

มันจะมีประโยชน์ถ้าเพิ่มคุณสมบัติใหม่แบบผสมใน runtime:

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

อย่างไรก็ตามผู้ประกอบการแพร่กระจายใช้คัดลอกตื้น แต่ที่นี่เรากำหนดข้อมูลให้กับตัวเองดังนั้นควรจะสูญเสียอะไร

วิธีง่ายๆที่สมบูรณ์แบบ

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

อย่างแน่นอน. คิดว่ามันเป็นพจนานุกรมหรืออาเรย์ คุณสามารถเพิ่มเข้าไปได้ทุกที่