迹忆客 专注技术分享

在 JavaScript 中，对象以键值对的形式编写。 我们可以通过键来获取对象的值。

但也可以通过变量引用键并使用变量访问对象中的值。 本文将介绍其实现方式。

JavaScript 中对象的访问属性

JavaScript 有多种方法来访问对象的属性。 所谓属性，就是一个对象的键。

我们可以使用方括号 []、点运算符 . 和对象解构来获取属性的值。 让我们逐一分析。

我们需要引用方括号内的属性来获取值，如下例所示。

示例代码：

var age = {
   Jack: 25,
   Danny: 23,
   Harry: 24
}

console.log(age['Jack']);

输出:

25

在上面的示例中，我们有一个对象 age，它包含字符串中的属性和数字中的值。 使用方括号，我们通过调用属性 Jack 访问了值 25。

让我们尝试使用点运算符来做到这一点。

console.log(age.Danny); //23

我们可以通过使用点运算符调用对象的属性来访问该值。 注意使用方括号符号时的区别。

我们在报价中写下了财产。 这是因为该属性是一个字符串。

但是即使属性在字符串中，我们也不必在使用点运算符时使用引号。

现在，让我们通过解构对象来访问这些值。

var { Harry } = age
console.log(Harry) // 24

在这里，我们将属性 Harry 放在花括号 {} 内。 它像一个变量一样工作，并将年龄对象作为它的值。

我们可以访问属性 Harry 的值。 这称为对象解构。

在 JavaScript 中使用方括号通过引用变量获取对象的值

我们还可以使用变量引用对象的属性，并使用它来访问对象的值。 它可以使用方括号符号 [] 来完成。

例如，考虑我们上面创建的年龄对象。 接下来，创建一个变量名称并将其设置为 Jack。

然后，使用方括号表示法访问名称变量以获取对象的值，如下所示。

示例代码：

var age = {
   Jack: 25,
   Danny: 23,
   Harry: 24
}

var name = "Jack";
console.log(age[name]);

输出:

25

使用点运算符时这是不可能的。

console.log(age.name); //undefined

这样，我们就可以在JavaScript中使用方括号通过属性引用的变量来访问对象的值了。