JavaScript 中的对象是一种常用的数据结构，使用键-值对来存储数据。有时候，我们需要以变量的形式动态地设置或访问对象的属性。本文将介绍如何在 JavaScript 对象中以变量作为键进行插值。
问题描述
假设我们有一个对象 person，它包含了一个人的姓名、年龄和性别：
const person = {
name: 'Alice',
age: 25,
gender: 'female'
};现在我们想要以变量的形式来访问这个对象的属性，例如访问 person 对象的 name 属性：
const propName = 'name'; console.log(person[propName]); // 输出：'Alice'
然而，如果我们直接使用点符号来访问对象属性，就无法动态地指定属性名称：
console.log(person.propName); // 输出：undefined
那么如何在 JavaScript 对象中以变量作为键进行插值呢？本文将提供两种解决方案。
方案一：使用方括号表示法
JavaScript 允许使用方括号表示法来访问对象的属性，这样我们就可以将属性名作为字符串传递给对象。因此，我们可以通过以下方式来访问 person 对象的 name 属性：
const propName = 'name'; console.log(person[propName]); // 输出：'Alice'
在这个例子中，propName 变量存储了属性的名称，我们使用方括号来访问属性，并将变量作为属性名的字符串传递给对象。
同样的方法也可以用于设置对象的属性值：
const propName = 'name'; person[propName] = 'Bob'; console.log(person.name); // 输出：'Bob'
方案二：使用 ES6 的计算属性名称
ES6 引入了一种新的语法，允许我们在对象字面量中使用计算属性名称。使用这种语法，我们可以以变量作为对象属性的键。
例如，我们可以使用计算属性名称来定义一个包含动态属性的对象：
const propName = 'name';
const person = {
age: 25,
gender: 'female',
[propName]: 'Alice'
};
console.log(person.name); // 输出：'Alice'在这个例子中，我们使用了计算属性名称 [propName] 来定义 person 对象的属性。这里的变量 propName 是动态的，它会被插入到对象字面量中，作为该属性的名称。
同样的方式也可以用于访问对象的属性：
const propName = 'name'; console.log(person[propName]); // 输出：'Alice'
总结
本文介绍了两种方法来在 JavaScript 对象中以变量作为键进行插值。第一种方法是使用方括号表示法来访问和设置对象的属性值；第二种方法是使用 ES6 的计算属性名称来定义对象的动态属性。这些技巧可以帮助我们更方便地操作 JavaScript 对象，并提高编程效率。
示例代码：
-- -------------------- ---- ------- -- ------------ ----- -------- - ------- ------------------------------ -- ---------- ---------------- - ------ ------------------------- -- -------- -- ------ --- ------- ----- -------- - ------- ----- ------ - - ---- --- ------- --------- ----------- ------- -- ------------------------- -- ---------- ------------------------------ -- ----------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27252