是否可以将动态命名的属性添加到JavaScript对象?

JavaScript

斯丁斯丁

2020-03-11

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

第640篇《是否可以将动态命名的属性添加到JavaScript对象?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
路易Pro 2020.03.11

绝对是 将其视为字典或关联数组。您可以随时添加它。

JinJin乐 2020.03.11

如果在运行时添加了新属性,则可能很有用:

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

但是,散布运算符使用浅表复制,但此处我们将数据分配给自身,因此应该不会丢失

逆天GO 2020.03.11

一种从包含对象的动态字符串名称访问的好方法(例如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相同

GOItachi 2020.03.11

最简单,最便携的方法是。

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

根据#abeing答案!

古一老丝宝儿 2020.03.11

只是上述安倍答案的补充。您可以定义一个函数来封装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

老丝镜风 2020.03.11

除了前面的所有答案之外,如果您想知道我们将来如何使用计算属性名(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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android