Javascript 如何使用变量作为名称向 JavaScript 对象添加属性

在本文中，我们将介绍如何使用变量作为名称来向 JavaScript 对象添加属性。JavaScript 是一种动态语言，允许我们在运行时动态地向对象添加或修改属性。这一特性非常有用，特别是当我们需要根据特定的条件或动态值来创建对象属性时。

使用点语法添加属性

JavaScript 对象有两种主要方式来添加属性：使用点语法和方括号语法。首先，我们来看看如何使用点语法来添加属性。

我们可以使用点语法直接将属性添加到对象中，属性名称可以是固定的字符串或者保存在变量中的字符串。下面是一个示例：

// 创建一个空对象
var person = {};

// 定义一个变量作为属性名称
var propertyName = "name";

// 使用点语法添加属性
person[propertyName] = "John Smith";

// 使用点语法访问属性
console.log(person.name); // output: John Smith

在上面的例子中，我们首先创建了一个空对象 person。然后，我们定义一个变量 propertyName 并将字符串 "name" 保存在其中。接下来，我们使用点语法，将 propertyName 变量作为属性名称，将值 "John Smith" 添加到 person 对象中。最后，我们使用点语法访问属性 person.name 并输出结果。

使用方括号语法添加属性

除了使用点语法，JavaScript 还允许我们使用方括号语法添加属性。这种语法更加灵活，可以接受任何表达式作为属性名称，包括保存在变量中的值。下面是一个示例：

// 创建一个空对象
var car = {};

// 定义一个变量作为属性名称
var propertyName = "brand";

// 使用方括号语法添加属性
car[propertyName] = "Tesla";

// 使用方括号语法访问属性
console.log(car["brand"]); // output: Tesla

在上述示例中，我们首先创建了一个空对象 car。然后，我们定义了一个变量 propertyName 并将字符串 "brand" 保存在其中。接下来，我们使用方括号语法，将 propertyName 变量作为属性名称，将值 "Tesla" 添加到 car 对象中。最后，我们使用方括号语法访问属性 car["brand"] 并输出结果。

使用变量作为名称添加属性的实际应用

使用变量作为名称添加属性的一个实际应用是根据用户的输入动态创建对象属性。例如，我们可以使用用户输入的值来创建一个包含该值的对象属性。下面是一个示例：

// 创建一个空对象
var product = {};

// 用户输入的属性名称
var propertyName = prompt("请输入属性名称：");

// 用户输入的属性值
var propertyValue = prompt("请输入属性值：");

// 使用变量作为属性名称和属性值
product[propertyName] = propertyValue;

// 输出属性值
console.log(product[propertyName]);

在上面的示例中，我们首先创建了一个空对象 product。然后，我们使用 prompt 函数弹出对话框，让用户输入属性名称和属性值。接下来，我们使用变量 propertyName 作为属性名称，变量 propertyValue 作为属性值，将用户输入的值添加到 product 对象中。最后，我们使用方括号语法访问属性 product[propertyName] 并输出结果。

使用变量作为名称添加属性还可以在循环中减少代码重复。例如，我们可以使用循环来根据数组中的值创建对象的属性。下面是一个示例：

// 创建一个空对象
var person = {};

// 数组保存属性名称
var propertyNames = ["name", "age", "gender"];

// 使用循环遍历数组并添加属性
for (var i = 0; i < propertyNames.length; i++) {
  var propertyName = propertyNames[i];
  person[propertyName] = prompt("请输入" + propertyName + "：");
}

// 输出属性值
console.log(person);

在上述示例中，我们首先创建了一个空对象 person。然后，我们使用数组 propertyNames 保存属性名称。接下来，我们使用循环遍历数组，并将每个数组元素保存到变量 propertyName 中。然后，我们使用变量 propertyName 作为属性名称，使用 prompt 函数弹出对话框让用户输入属性值，并将用户输入的值添加到 person 对象中。最后，我们使用 console.log 输出结果。