JavaScript 从变量创建对象键

在JavaScript中，我们可以使用对象来存储和操作一系列的数据。对象由一组键和相应的值组成，可以通过键来访问和修改对象的值。

在某些情况下，我们可能需要动态地创建对象的键，因此，将变量用作对象键是非常有用的。

对象和键

在JavaScript中，对象是通过对象字面量或构造函数创建的，例如：

// 通过对象字面量创建对象
const person = {
  name: 'Lucy',
  age: 21,
  gender: 'female',
};

// 通过构造函数创建对象
function Student(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

const student = new Student('Jack', 20, 'male');

在上面的例子中，person 对象有三个键：name、age 和 gender，而 student 对象也有三个键：name、age 和 gender。

使用变量作为对象键

我们可以使用变量作为对象键，例如：

const propertyName = 'name';
const person = {
  [propertyName]: 'Lucy',
  age: 21,
  gender: 'female',
};

console.log(person.name); // 输出：Lucy

上述代码中，我们定义了一个名为 propertyName 的变量，它的值为字符串 'name'，然后我们在对象字面量中使用了方括号来使用这个变量作为对象的键，最终生成的对象中，键为 name，它的值为 'Lucy'。

我们也可以使用表达式作为对象键，例如：

const person = {
  ['na' + 'me']: 'Lucy',
  age: 21,
  gender: 'female',
};

console.log(person.name); // 输出：Lucy

上述代码中，我们使用了一个字符串拼接表达式 'na' + 'me' 作为对象的键，最终生成的对象中，键为 name，它的值为 'Lucy'。

使用变量和表达式动态生成键名称

更进一步，有时候我们需要根据特定的值或条件来动态生成对象的键名称，我们可以使用变量和表达式混合的方式来实现，例如：

function createPerson(name, age, gender) {
  const prefix = gender === 'male' ? 'Mr.' : 'Ms.';
  const person = {
    [`${prefix} ${name}`]: {
      age,
      gender,
    },
  };
  return person;
}

const person = createPerson('Lucy', 21, 'female');
console.log(person); // 输出：{ 'Ms. Lucy': { age: 21, gender: 'female' } }

上述代码中，我们定义了一个名为 createPerson 的函数，它接受 name、age 和 gender 三个参数，根据 gender 值的不同来生成不同的前缀 prefix，然后将 name、age 和 gender 值保存到一个对象中，并将对象的键名设置为 prefix + name。

最后，我们调用 createPerson 函数并传入 Lucy、21 和 female 三个参数，函数返回的对象中，键名为 Ms. Lucy，它的值是一个包含 age 和 gender 键的子对象。

结论

在JavaScript中，使用变量作为对象键可以非常方便地动态生成对象，并根据特定的值或条件来设置键名称。通过使用方括号和字符串拼接表达式等方式，我们可以在对象字面量中使用变量和表达式来生成键名称。