在前端开发中，创建对象是一个常见的操作。我们通常使用字面量或构造函数来创建对象，并为其设置属性和方法。但有时候我们需要使用变量作为属性名称动态地创建对象。在本文中，我们将介绍如何使用变量为属性名称创建对象，并提供一些实际应用的示例。
创建对象的两种方式
在 JavaScript 中，创建对象有两种方式：使用字面量和使用构造函数。以字面量方式创建对象时，我们可以直接指定属性名称和值：
const obj = {
name: 'Tom',
age: 18,
gender: 'male'
};而使用构造函数，则需要通过 new 关键字调用构造函数来创建对象，并在构造函数内部设置属性和方法：
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
const tom = new Person('Tom', 18, 'male');在上述代码中，我们分别使用了字面量和构造函数两种方式创建了对象。但是，这两种方式都需要我们在编写代码时就确定属性名称。如果我们希望动态地根据变量名创建属性，则需要使用一些特殊的语法。
在 JavaScript 中，我们可以使用方括号语法来动态地设置对象的属性。具体来说，我们可以使用变量作为方括号中的属性名称，来创建或修改对象的属性：
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- ------- ------ -- ----- -------- - ------- ------------- - -------- ---------------------- -- -------
在上述代码中，我们使用了一个变量 propName 作为属性名称，并将其赋值为 'name'。然后，我们通过 obj[propName] 的方式来修改对象的属性值，实现了动态设置属性的效果。
除了修改属性值外，我们还可以使用同样的语法来创建新的属性：
const obj = {};
const propName = 'name';
const propValue = 'Tom';
obj[propName] = propValue;
console.log(obj.name); // 'Tom'在上述代码中，我们首先创建了一个空对象 obj，然后使用变量 propName 和 propValue 分别指定了属性名称和属性值，并使用方括号语法将它们添加到了对象中。
实际应用示例
使用变量为属性名称创建对象的最常见应用场景之一是处理 JSON 数据。在从服务器获取 JSON 数据时，我们可以使用变量来遍历数据并动态地创建对象。
假设我们从服务器获取到以下 JSON 数据：
{
"name": "Tom",
"age": 18,
"gender": "male"
}如果我们想要将这些数据转换成 JavaScript 对象，则可以使用以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------------------------------ ----- ------- - -------------------- ----- --- - --- --- ------ -------- -- -------- - ------------- - ------------------ - ---------------------- -- -----
在上述代码中，我们首先使用 JSON.parse() 方法将 JSON 字符串转换成了 JavaScript 对象。然后，我们创建了一个空对象 obj，并使用 for...in 循环遍历了原始对象 jsonObj 中的所有属性，并逐一添加到了新对象 obj 中。
另一个常见的应用场景是使用变量为属性名称动态地设置 CSS 样式。例如，我们可以编写一个函数来根据参数设置元素的样式：
function setStyle(element, propName, propValue) {
element.style[propName] = propValue;
}
const myButton = document.querySelector('#my-button');
setStyle(myButton, 'backgroundColor', 'red');在上述代码中，我们定义了一个 setStyle()
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13842