一：引言

在进行对象取值操作时，我们有两种方式，一种是点操作符，一种是方括号操作符，那么这两种有什么区别呢？

二：方式

1：点操作符（.）

属性名必须是有效的标识符（如字母、数字、下划线，且不能以数字开头），且不支持包含特殊字符或空格的属性名

a.b

2：方括号操作符（[]）

属性名可以是任意字符串或变量，包括动态生成的字符串、数字、含特殊字符的字符串等

a['123']

三：差异

（1）形式上

1：点操作符属性名需在代码中固定书写，无法通过变量动态指定

2：方括号操作符属性名可通过变量或表达式动态生成

（2）场景上

1：点操作符适用于属性名已知且固定的场景

2：方括号操作符适用于需要根据条件或循环动态访问属性

（3）性能上

1：点操作符比方括号操作符性能高，因为直接通过标识符访问呢属性，而方括号需要解析字符串或者表达式

（4）可读性上

1：点操作符更简洁直观

2：方括号操作符可以动态属性名，更灵活

四：代码

1：点操作符

const obj = { a: { b: { c: { d: 123 } } } };

// 点操作符
const d1 = obj.a.b.c.d;  // 123

2：方括号操作符

const obj = { a: { b: { c: { d: 123 } } } };



// 方括号操作符
const d2 = obj['a']['b']['c']['d'];  // 123