JS访问对象两种方式区别解析

JS访问对象有两种方式：点号和方括号。它们之间有着一些细微的差异，下面我将逐一进行解析。

1. 点号方法

语法：

objectName.propertyName

使用点号方法时，我们需要知道对象的属性名称。点号引用属性时，也可以引用变量。

示例：

const person = {
    name: "张三",
    age: 18
}
console.log(person.name) // 输出：张三

const propertyName = "age";
console.log(person.propertyName) // 输出：undefined

从上面的代码可以看出，使用点号方法访问对象属性时，需要直接写出属性名。如果我们只知道属性名存储在变量中，就无法直接使用点号方法进行访问。

2. 方括号方法

语法：

objectName['propertyName']

使用方括号方法时，我们可以使用变量引用属性名称。

示例：

const person = {
    name: "李四",
    age: 25
}
console.log(person["age"]) // 输出：25

const propertyName = "name";
console.log(person[propertyName]) // 输出：李四

从上面的代码可以看出，使用方括号方法访问对象时，我们可以传递变量作为属性名。这使得我们可以根据程序的运行结果来选择要使用的属性。

3. 区别解析

在日常编程中，使用点号访问对象的属性是非常常见的，而方括号方法不太常用。那么，这两种方法之间的区别究竟在哪里呢？

总的来说，这两种方法之间的差异主要在于我们在使用时需要传递给它们的属性名是存储在哪里的。

既然我们不能将变量名传递给点号，那么什么情况下使用它呢？当我们知道属性名时，我们通常会使用点号。例如，我们想要返回一个人的姓名，我们可以使用以下方法访问：

person.name

但是，如果属性名是存储在变量中的，我们需要使用方括号：

person[propertyName]

因此，基于这一因素，我们通常在需要使用变量作为属性名称时使用方括号，否则使用点号。