javascript - свойства - удалить свойство объекта js




Можно ли добавить динамически именованные свойства в объект JavaScript? (10)

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

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
}

Это использует новый синтаксис Compute Property и Template Literals .


Вот как я решил проблему.

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

Вы можете добавлять свойства динамически, используя некоторые из следующих вариантов:

В вашем примере:

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

Вы можете определить свойство с динамическим значением следующими двумя способами:

data.key = value;

или же

data['key'] = value;

Еще больше. Если ваш ключ также динамический, вы можете определить, используя класс Object, с помощью:

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

где data - ваш объект, ключ - это переменная для хранения имени ключа, а значение - это переменная для сохранения значения.

Надеюсь, это поможет!


Да, это возможно. Предполагая, что:

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

Здесь, используя ваши обозначения:

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 varFieldName = "good";
var ob = {};
Object.defineProperty(ob, varFieldName , { value: "Fresh Value" });

Основано на #abeing ответе!


Хороший способ доступа к динамическим именам строк, содержащих объекты (например, 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


Я знаю, что на вопрос ответили отлично, но я также нашел другой способ добавить новые свойства и хотел поделиться им с вами:

Вы можете использовать функцию 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

в дополнение ко всем предыдущим ответам, и в случае, если вам интересно, как мы будем писать динамические имена свойств в будущем с использованием имен вычисляемых свойств (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 - Николас Закас





javascript