是否可以向JavaScript对象添加动态命名的属性？

Question

是否可以向JavaScript对象添加动态命名的属性？在JavaScript中，我创建了如下所示的对象：var data = {     'PropertyA': 1,     'PropertyB': 2,     'PropertyC': 3};如果属性名称直到运行时才确定，那么在该对象最初创建之后是否可以向它添加进一步的属性？E.var propName = 'Property' + someUserInput//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to //my object?

Answer 1

是。

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

为胜利而战！

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}

这利用了新的计算性质语法和模板文字.

Answer 3

是的是有可能的。假设：

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

Answer 4

我知道这个问题得到了完美的回答，但我也找到了另一种添加新属性的方法，并希望与您分享：

您可以使用该函数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