在JavaScript中，对象属性访问最常用的两种写法是点操作符和方括号操作符。它们都能读取或设置对象中的属性，但二者的语法约束和运行时解析过程并不相同。点操作符写起来更简洁，适合访问固定且符合标识符规范的属性名；方括号操作符则具备更大的灵活性，能够处理动态属性名以及包含特殊字符的键名。理解这两种访问方式的区别，有助于开发者在处理接口数据、遍历对象以及构建动态查询逻辑时写出更可靠的代码。
基础语法与访问形式
点操作符的语法格式为对象.属性名，它要求属性名在书写时直接跟在点号之后，并且必须是合法的JavaScript标识符。方括号操作符的语法格式为对象[属性名]，方括号内的属性名需要是字符串类型，或者是一个可以被计算并转换为字符串的表达式。在基础场景下，两种写法的访问结果一致。
例如，定义一个包含普通属性和带连字符属性的用户对象，使用user.name与user["name"]都可以读取到姓名。但对于user-address这样的键名，点操作符会将其中的连字符解析为减法运算符，从而产生错误或非预期结果，因此只能使用方括号形式进行访问。
const user = {
name: "张三",
age: 25,
"user-address": "北京市朝阳区"
};
// 使用点操作符访问普通属性
console.log(user.name); // 张三
console.log(user.age); // 25
// 使用方括号操作符访问普通属性
console.log(user["name"]); // 张三
console.log(user["age"]); // 25
// 带连字符的属性只能使用方括号访问
console.log(user["user-address"]); // 北京市朝阳区
// console.log(user.user-address); // 会被解析为减法运算，无法正常访问
从上面的示例可以看出，方括号访问时必须给字符串字面量加上引号，否则JavaScript引擎会把方括号中的内容当作变量处理。理解这一点是正确使用方括号操作符的前提，也能避免很多因属性名书写不规范而导致的隐藏错误。
核心差异的深入比较
两种操作符的差异主要集中在属性名限制、动态访问能力以及属性名解析规则三个方面。掌握这些差异，能够帮助开发者在不同场景中快速判断应该采用哪一种写法。
属性名限制不同
点操作符要求属性名必须是合法的JavaScript标识符，即只能由字母、数字、下划线和美元符号组成，并且不能以数字开头。属性名中一旦出现空格、连字符或者其他特殊字符，点操作符就无法直接使用。
方括号操作符则没有上述限制。只要属性名可以表示为字符串，即使它以数字开头、包含空格或连字符，也可以通过方括号进行读取或设置。
const obj = {
"1invalid": "特殊属性名",
"my name": "带空格的属性"
};
// 点操作符无法访问以下属性
// console.log(obj.1invalid); // 语法错误
// console.log(obj.my name); // 语法错误
// 方括号操作符可以正常访问
console.log(obj["1invalid"]); // 特殊属性名
console.log(obj["my name"]); // 带空格的属性
动态属性访问能力不同
点操作符后面只能跟随固定的属性名字面量，无法直接使用变量。即便变量中保存了目标属性名，obj.propName仍然会被解释为访问名为propName的属性，而不是读取变量propName的值。
方括号操作符支持传入变量或表达式，因此可以根据运行时的数据动态决定访问哪一个属性。这一特性在处理接口返回字段、循环读取对象属性以及根据用户输入查询数据时非常实用。
const product = {
id: 1001,
title: "笔记本电脑",
price: 4999
};
const propName = "title";
// 点操作符无法通过变量访问
console.log(product.propName); // undefined，因为访问的是propName属性
console.log(product[propName]); // 笔记本电脑
// 方括号支持表达式计算属性名
const key = "pri" + "ce";
console.log(product[key]); // 4999
属性名解析规则不同
点操作符会把点号后面的内容直接当作字符串属性名使用，不会再进行表达式求值。而方括号操作符会先计算方括号内的表达式，再把结果转换为字符串作为属性名。
因此，当方括号内写入数字时，数字会先被转换成字符串，例如obj[1]与obj["1"]访问的是同一个属性。布尔值等其他类型也会通过toString方法转换为字符串后再参与属性查找。
const data = {
1: "数字属性",
true: "布尔属性"
};
console.log(data[1]); // 数字属性
console.log(data["1"]); // 数字属性
console.log(data[true]); // 布尔属性
console.log(data["true"]); // 布尔属性
实际开发中的选择与注意事项
在实际开发中，选择哪种访问方式并没有绝对标准，但可以根据属性名特征和是否依赖动态值来判断。如果属性名固定且符合标识符规范，点操作符可以让代码更简洁、更容易阅读，例如user.name、obj.length。如果属性名来自变量、用户输入或接口数据，或者属性名中包含特殊字符，则应当使用方括号操作符。
需要特别注意的是，方括号中的字符串字面量必须加引号。如果写成user[name]，JavaScript会把name当作变量进行求值。如果该变量未定义，代码会抛出引用错误；如果变量存在但其值与目标属性名不一致，则会访问到错误的属性或返回undefined。
另外，无论使用点操作符还是方括号操作符，访问对象上不存在的属性都不会抛出错误，而是返回 undefined。例如：
const user = { name: "Alice" };
console.log(user.age); // undefined
console.log(user["address"]); // undefined
这也意味着，如果代码中直接对不存在的属性返回的结果继续执行操作，例如访问 undefined 上的属性或调用方法，就会抛出 TypeError。此时可以使用可选链操作符 ?. 来安全地处理可能不存在的属性：
const user = { name: "Alice" };
console.log(user.age?.street); // undefined
console.log(user.address?.city); // undefined
console.log(user["address"]?.["city"]); // undefined
可选链同样支持方括号语法，但需要注意，可选链只能解决属性访问链上的 undefined 或 null 问题，不能代替完整的逻辑判断。
属性存在性判断
当需要区分“属性不存在”和“属性值为 undefined”时，可以使用 in 操作符或 hasOwnProperty 方法。
const obj = { a: undefined };
console.log("a" in obj); // true
console.log(obj.hasOwnProperty("a")); // true
console.log("b" in obj); // false
console.log(obj.hasOwnProperty("b")); // false
in 操作符会检查对象及其原型链，而 hasOwnProperty 只检查对象自身是否拥有该属性。如果对象可能没有继承自 Object.prototype 的方法，可以使用 Object.hasOwn(obj, "a") 作为更稳健的替代。
删除对象属性
可以使用 delete 操作符移除对象上的属性：
const obj = { name: "Alice", age: 30 };
delete obj.age;
console.log(obj.age); // undefined
console.log("age" in obj); // false
遍历对象属性
常见的遍历方式有 for...in、Object.keys、Object.values 和 Object.entries：
const obj = { brand: "Apple", price: 4999, stock: 20 };
for (const key in obj) {
console.log(key, obj[key]);
}
Object.keys(obj).forEach(key => console.log(key, obj[key]));
Object.values(obj).forEach(value => console.log(value));
Object.entries(obj).forEach(([key, value]) => console.log(key, value));
其中 for...in 会遍历对象自身的可枚举属性和原型链上的可枚举属性，因此实际项目中使用时需要结合 hasOwnProperty 过滤，或者直接使用 Object.keys、Object.entries 等返回自身可枚举属性的方法。
小结
点操作符和方括号操作符是访问对象属性的两种基本方式。点操作符简洁但属性名必须是合法的标识符且不能动态变化；方括号操作符灵活，可以接受变量、表达式和非常规属性名。无论使用哪种方式，访问不存在的属性都会返回 undefined，而不是直接报错。合理使用 in、hasOwnProperty、可选链和遍历方法，能够帮助我们写出更健壮的对象操作代码。
JavaScript对象属性访问点操作符方括号操作符属性访问器修改时间：2026-07-15 13:03:27