面试题：JavaScript属性访问表达式的基础与应用

Question

请描述JavaScript中通过点号（.）和方括号（[]）进行属性访问表达式的区别，并举例说明在哪些场景下会选择使用方括号访问。

Answer 1

区别

1. 语法灵活性：
   • 点号（.）：语法相对固定，要求属性名是一个合法的标识符，即必须以字母、下划线（_）或美元符号（$）开头，后面可以跟字母、数字、下划线或美元符号。例如：obj.propertyName。
   • 方括号（[]）：更加灵活，属性名可以是任何有效的字符串，甚至可以是变量或表达式。例如：obj['property - name'] 或 obj[varName]。
2. 属性名限制：
   • 点号（.）：不能用于访问属性名包含特殊字符（如空格、连字符等）的属性，除非将属性名用引号括起来，但这样就无法使用点号访问了。例如，不能用点号访问 obj['property - name']。
   • 方括号（[]）：可以访问任何字符串形式的属性名，无论是否包含特殊字符。如 obj['property - name']。
3. 动态访问：
   • 点号（.）：不能动态确定属性名，在代码编写时属性名就必须明确指定。例如，不能写成 obj[varThatHoldsPropName] 这种形式。
   • 方括号（[]）：支持动态访问属性，即属性名可以通过变量或表达式来确定。例如：

let prop = 'name';
let obj = {name: 'John'};
console.log(obj[prop]); // 输出 'John'

方括号访问场景

1. 属性名包含特殊字符：
   • 当属性名包含空格、连字符等特殊字符时，必须使用方括号访问。

let obj = {'data - value': 42};
console.log(obj['data - value']); // 输出 42

2. 动态属性名：
   • 当需要根据变量或表达式的值来动态获取属性时，使用方括号。

function getPropValue(obj, prop) {
    return obj[prop];
}
let myObj = {age: 30};
let propToGet = 'age';
console.log(getPropValue(myObj, propToGet)); // 输出 30

3. 遍历对象属性：
   • 在使用 for...in 循环遍历对象属性时，通常使用方括号来访问属性。

let obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
    console.log(obj[prop]); // 依次输出 1, 2, 3
}