JavaScript中访问对象属性主要有两种常用方式，分别是点操作符和方括号操作符，两者在基础属性访问场景下都能实现相同的效果，但在语法规则、适用场景上存在明显差异，理解这些差异能帮助开发者写出更合理的代码。
基础语法与基本使用
点操作符的语法格式为对象.属性名，方括号操作符的语法格式为对象[属性名]，其中方括号中的属性名需要是字符串类型或者能够转换为字符串的表达式。两种操作符的基础使用示例如下：
// 定义一个测试对象
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
核心差异对比
属性名限制不同
点操作符要求属性名必须是合法的JavaScript标识符，也就是只能包含字母、数字、下划线和美元符号，且不能以数字开头，也不能包含连字符、空格等特殊字符。如果属性名不符合这个规则，使用点操作符访问会直接抛出语法错误。
方括号操作符没有这个限制，只要属性名是字符串类型，即使包含特殊字符、空格，或者是以数字开头，都可以通过方括号访问。比如上面示例中的user-address属性，使用点操作符user.user-address会被解析为减法运算，导致错误，而用方括号user['user-address']就能正常访问。
const obj = {
'1invalid': '特殊属性名',
'my name': '带空格的属性'
};
// 点操作符访问会报错
// console.log(obj.1invalid); // SyntaxError
// console.log(obj.my name); // SyntaxError
// 方括号操作符可以正常访问
console.log(obj['1invalid']); // 输出：特殊属性名
console.log(obj['my name']); // 输出：带空格的属性
是否支持动态属性访问
点操作符后面的属性名必须是固定的字面量，无法使用变量动态指定要访问的属性，而方括号操作符支持传入变量或者表达式，实现动态属性访问，这是两者最核心的差异之一。
const product = {
id: 1001,
title: '笔记本电脑',
price: 4999
};
const propName = 'title';
// 点操作符无法使用变量
// console.log(product.propName); // 输出：undefined，实际访问的是product的propName属性，不是title属性
// 方括号操作符可以使用变量动态访问
console.log(product[propName]); // 输出：笔记本电脑
// 方括号也支持表达式计算属性名
const key = 'pri' + 'ce';
console.log(product[key]); // 输出：4999
属性名解析规则不同
点操作符后面的属性名会被直接作为字符串属性名处理，不会进行额外的计算。而方括号操作符中的内容会先作为JavaScript表达式进行计算，再将计算结果转换为字符串作为属性名。
如果方括号中传入的是数字，会被自动转换为字符串，所以obj[1]和obj['1']是等价的。如果传入的是其他类型的值，也会先调用toString方法转换为字符串再作为属性名。
const data = {
1: '数字属性',
true: '布尔属性'
};
console.log(data[1]); // 输出：数字属性，数字1被转换为字符串'1'
console.log(data['1']); // 输出：数字属性
console.log(data[true]); // 输出：布尔属性，true被转换为字符串'true'
console.log(data['true']); // 输出：布尔属性
适用场景选择
在实际开发中，可以根据场景选择合适的属性访问方式：
- 如果属性名是固定的合法标识符，优先使用点操作符，代码更简洁易读，比如访问
user.name、obj.length这类场景。 - 如果属性名包含特殊字符、空格，或者需要动态指定属性名，必须使用方括号操作符，比如根据接口返回的字段名动态获取对象属性、处理后端返回的带连字符的属性名等场景。
- 如果需要遍历对象的所有属性，或者根据用户输入动态访问属性，方括号操作符是唯一的选择。
注意事项
使用方括号操作符时，如果属性名是字符串字面量，必须加引号，否则会被当作变量处理，导致访问到undefined。比如user[name]会尝试访问name变量的值作为属性名，而不是访问'name'属性。
另外，访问不存在的属性时，两种操作符都会返回undefined，不会抛出错误，所以在访问属性前如果需要判断属性是否存在，可以使用in操作符或者hasOwnProperty方法。
const testObj = { a: 1 };
console.log(testObj.b); // 输出：undefined
console.log(testObj['b']); // 输出：undefined
console.log('a' in testObj); // 输出：true
console.log(testObj.hasOwnProperty('b')); // 输出：false
JavaScript对象属性访问点操作符方括号操作符属性访问器修改时间：2026-07-15 13:03:27