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