JS中对象的方括号[]和点.【对象属性的访问和设置】
在 JavaScript 中，可以使用多种方式来访问和设置对象的属性, 包括点表示法和方括号表示法。
点表示法和方括号表示法
- 点表示法：使用点号（
.）来访问或设置对象的属性。 - 方括号表示法：使用方括号（
[]）来访问或设置对象的属性。
这两种方法基本上是等价的，然而在某些情况下，方括号表示法能够提供更多的灵活性，例如属性名是变量或包含特殊字符的情况。
示例代码解释
const s = {};
s['name'] = 'john';
s.name = 'bob';
这段代码执行了以下操作：
-
创建对象
const s = {};创建了一个新的空对象
s。 -
方括号表示法设置属性
s['name'] = 'john';使用方括号表示法，设置对象
s的属性name为'john'。此时，
s的状态为：{name: 'john' } -
点表示法设置属性
s.name = 'bob';使用点表示法，设置对象
s的属性name为'bob'。最终，
s的状态为：{name: 'bob' }
由于最后一次设置操作赋值为 'bob'，属性名和其值之间的映射被更新，因此最终 s.name 变成了 'bob'。
点表示法 vs 方括号表示法
使用点表示法的示例：
const person = {};
person.name = 'Alice';
person.age = 25;console.log(person.name); // 输出 'Alice'
console.log(person.age); // 输出 25
使用方括号表示法的示例：
const person = {};
person['name'] = 'Alice';
person['age'] = 25;console.log(person['name']); // 输出 'Alice'
console.log(person['age']); // 输出 25
方括号表示法的特殊应用场景：
-
使用变量作为属性名
const person = {}; const prop = 'name'; person[prop] = 'Alice';console.log(person.name); // 输出 'Alice' -
处理包含特殊字符的属性名
const person = {}; person['first-name'] = 'Alice';console.log(person['first-name']); // 输出 'Alice' -
动态属性名
const person = {}; let key = 'age';person[key] = 30;console.log(person.age); // 输出 30
总结
- 点表示法 (
.)：更简洁，用于常规属性名（遵循变量命名规则）。 - 方括号表示法 (
[])：更灵活，可用于属性名是变量、含有特殊字符或者包含空格的情况。
在你的示例中，两种表示法都用于设置和获取对象属性，最后一次的赋值操作覆盖了前一个操作，因此 s.name 的最终值为 'bob'。