Возможно ли динамически добавлять свойства с именами в JavaScript объект?
У меня есть объект в JavaScript, созданный следующим образом:
var data = {
'PropertyA': 1,
'PropertyB': 2,
'PropertyC': 3
};
Возможно ли добавить новые свойства к этому объекту после его первоначального создания, если имена свойств не известны до выполнения программы? Например:
var propName = 'Property' + someUserInput;
// допустим, someUserInput равно 'Z', как мне теперь добавить свойство 'PropertyZ'
// к моему объекту?
Как можно программно добавлять свойства к объекту на основе пользовательского ввода?
5 ответ(ов)
Да.
В вашем коде вы создаете объект data
с тремя свойствами: PropertyA
, PropertyB
и PropertyC
. Затем вы добавляете новое свойство PropertyD
со значением 4
.
Вы также используете два способа для отображения значения этого нового свойства:
alert(data.PropertyD);
- здесь вы обращаетесь к свойствуPropertyD
через точечную нотацию.alert(data["PropertyD"]);
- здесь вы используете квадратные скобки, чтобы получить значение свойства, что является альтернативным и часто более гибким способом обращения к свойствам объектов.
Оба метода выведут в диалоговом окне значение 4
.
Да, это возможно. Предположим, у вас есть следующий код:
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]);
ES6 вводит вычисляемые имена свойств, которые позволяют создавать свойства объекта с использованием переменных. Например, в вашем коде:
let a = 'key';
let myObj = {[a]: 10};
// результат будет: {key: 10}
Вы можете использовать переменную a
в квадратных скобках для создания свойства key
в объекте myObj
, что удобно для динамического определения имен свойств объектов.
Вы можете добавить новое свойство к объекту 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'
}
Таким образом, вы успешно добавили новое свойство к объекту, используя динамически сформированное имя свойства.
Вы можете добавить столько свойств, сколько вам нужно, просто используя нотацию точки:
var data = {
var1: 'somevalue'
}
data.newAttribute = 'newvalue'
или:
data[newAttribute] = someValue
для динамических ключей.
Где найти документацию по форматированию даты в JavaScript?
В чем разница между String.slice и String.substring?
Проверка соответствия строки регулярному выражению в JS
Существует ли ссылка на "последнюю" библиотеку jQuery в Google APIs?
Как создать диалог с кнопками "Ок" и "Отмена"