9

Возможно ли динамически добавлять свойства с именами в JavaScript объект?

5

У меня есть объект в JavaScript, созданный следующим образом:

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

Возможно ли добавить новые свойства к этому объекту после его первоначального создания, если имена свойств не известны до выполнения программы? Например:

var propName = 'Property' + someUserInput;
// допустим, someUserInput равно 'Z', как мне теперь добавить свойство 'PropertyZ'
// к моему объекту?

Как можно программно добавлять свойства к объекту на основе пользовательского ввода?

5 ответ(ов)

15

Да.

В вашем коде вы создаете объект data с тремя свойствами: PropertyA, PropertyB и PropertyC. Затем вы добавляете новое свойство PropertyD со значением 4.

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

  1. alert(data.PropertyD); - здесь вы обращаетесь к свойству PropertyD через точечную нотацию.
  2. alert(data["PropertyD"]); - здесь вы используете квадратные скобки, чтобы получить значение свойства, что является альтернативным и часто более гибким способом обращения к свойствам объектов.

Оба метода выведут в диалоговом окне значение 4.

0

Да, это возможно. Предположим, у вас есть следующий код:

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

ES6 вводит вычисляемые имена свойств, которые позволяют создавать свойства объекта с использованием переменных. Например, в вашем коде:

let a = 'key';
let myObj = {[a]: 10};
// результат будет: {key: 10}

Вы можете использовать переменную a в квадратных скобках для создания свойства key в объекте myObj, что удобно для динамического определения имен свойств объектов.

0

Вы можете добавить новое свойство к объекту data, используя синтаксис квадратных скобок. В вашем примере, если переменная someUserInput содержит значение 'Z', вы можете добавить свойство PropertyZ следующим образом:

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

var someUserInput = 'Z'; // предположим, что это значение вводится пользователем
var propName = 'Property' + someUserInput;

// Теперь добавляем новое свойство 'PropertyZ'
data[propName] = 'Some New Property value';

console.log(data);

После выполнения этого кода ваш объект data будет выглядеть так:

{
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3,
    'PropertyZ': 'Some New Property value'
}

Таким образом, вы успешно добавили новое свойство к объекту, используя динамически сформированное имя свойства.

0

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

var data = {
    var1: 'somevalue'
}
data.newAttribute = 'newvalue'

или:

data[newAttribute] = someValue

для динамических ключей.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь