JavaScript中对象属性访问：点号与方括号的区别

JavaScript对象成员概述

属性用于存储描述对象特征的数据，例如颜色、尺寸或重量等变量；方法则是封装在对象中的函数，用于执行特定操作，如奔跑、呼吸或跳跃等行为。

在JavaScript中，通常使用点（.）运算符来读取或设置对象的属性值。此外，也可以将对象视为关联数组，使用方括号（[]）语法来存取属性。

对象的属性和方法统称为该对象的成员。

对象属性与方法访问语法

访问对象的属性

在JavaScript中，可以使用点（.）和方括号（[]）两种方式来访问对象的属性。

1. 使用“ . ”来访问对象属性

语法格式如下：

objectName.propertyName

其中，objectName 代表对象的名称，propertyName 代表属性的名称。

2. 使用“ [ ] ”来访问对象属性

语法格式如下：

objectName[propertyName]

其中，objectName 代表对象的名称，propertyName 代表属性的名称。

访问对象的方法

在JavaScript中，访问对象的方法时只能使用点（.）运算符。

语法格式如下：

objectName.methodName()

其中，objectName 代表对象的名称，methodName() 代表方法的名称。

【例5-1】创建一个Person类：

function Person() {
  this.name=" 张三 "; // 定义一个属性 name
  this.sex=" 男 "; // 定义一个属性 sex
  this.age=22; // 定义一个属性 age
  this.say=function(){ // 定义一个方法 say()
    return "嗨！大家好，我的名字是 " + this.name + " ，性别是 " + this.sex + "，今年 " + this.age +"岁！";
  }
}
var zhangsan=new Person();
alert("姓名："+zhangsan.name); // 使用“.”来访问对象属性
alert("性别："+zhangsan.sex);
alert("年龄："+zhangsan["age"]); // 使用“[ ]”来访问对象属性
alert(zhangsan.say);  // 使用“.”来访问对象方法

点号与方括号的详细对比

PS：浅析对象访问属性的"."和"[]"方法区别

在JavaScript中，通常使用点（.）运算符来存取对象的属性值，或者使用方括号（[]）作为关联数组来存取属性。那么，这两种方式具体存在哪些区别呢？

例如，读取 object 中的 property 属性值：

object.property

object['property']

上述两种方式均可以实现属性的存取操作。

1.语法方面的区别

点表示法中的属性名必须是有效的标识符，而方括号表示法中的属性名则是一个字符串。

2.灵活性方面的区别

在JavaScript编程中，可以为对象创建任意数量的属性。然而，使用点（.）运算符存取属性时，属性名是以标识符形式存在的。在JavaScript程序中，标识符必须逐字输入，它们不属于数据类型，因此程序无法对标识符本身进行操作。这意味着标识符是静态的，必须在代码中进行硬编码。

而使用方括号（[]）表示法存取属性时，属性名是以字符串形式存在的。字符串是JavaScript的一种数据类型，因此可以在程序运行过程中动态操作并创建它们。

3.性能方面区别

方括号（[]）表示法在存取属性值时会进行表达式求值。而点表示法直接存取属性值，理论上执行效率会略高于方括号表示法。不过在现代JavaScript引擎中，这种性能差异通常可以忽略不计。

在某些场景下，必须使用方括号表示法来动态存取属性值，这是点表示法无法做到的。

总的来说，这两种方法在区别上并不大，各自都有对应的适用场景。点表示法通常用于静态对象属性的存取，而方括号表示法在需要动态存取属性时则非常有用。