Ist es möglich, dynamisch benannte Eigenschaften zu JavaScript-Objekten hinzuzufügen?

Question

In JavaScript habe ich ein Objekt wie folgt erstellt:

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

Ist es möglich, diesem Objekt nach seiner ersten Erstellung weitere Eigenschaften hinzuzufügen, wenn der Name der Eigenschaften erst zur Laufzeit festgelegt wird? d.h.

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

Answer 1

Oui.

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

data["PropertyD"] = 4;

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

Answer 2

ES6 für den Sieg!

const b = 'B';
const c = 'C';

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

Wenn Sie sich data erhalten Sie dies:

{
  a: true,
  B: true,
  interpolated-C: true,
  B-C: true
}

Dabei wird die neue Berechnete Eigenschaft Syntax und Vorlage Literale .

Answer 3

Ja, das ist möglich. Angenommen:

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

Entweder:

data[propertyName] = propertyValue;

ou

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

Die erste Methode ist zu bevorzugen. eval() hat die offensichtlichen Sicherheitsbedenken, wenn Sie vom Benutzer gelieferte Werte verwenden, also verwenden Sie es nicht, wenn Sie es vermeiden können, aber es ist wert, zu wissen, dass es existiert und was es tun kann.

Sie können dies mit referenzieren:

alert(data.someProperty);

ou

data(data["someProperty"]);

ou

alert(data[propertyName]);

Answer 4

ES6 führt berechnete Eigenschaftsnamen ein, mit denen Sie Folgendes tun können

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

Answer 5

Ich weiß, dass die Frage perfekt beantwortet ist, aber ich habe noch eine andere Möglichkeit gefunden, neue Eigenschaften hinzuzufügen, und wollte sie mit Ihnen teilen:

Sie können die Funktion Object.defineProperty()

Gefunden am Mozilla-Entwickler-Netzwerk

Beispiel:

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