JavaScript 動態訪問對象屬性：方括號語法 vs 點語法深度解析

核心問題

為何 temp.("name"+1) 報錯，而 temp['name'+1] 正常？Groovy 支持前者，JS 為何不支援？

語言規格差異

ECMAScript 規格規定

• 點語法：obj.identifier 中 identifier 必須是 靜態標識符，符合變量命名規則（字母/下劃線/$ 開頭，後接字母/數字/下劃線/$），不能是表達式
• 方括號語法：obj[expression] 中 expression 可以是 任意字符串表達式，運行時求值後作為屬性鍵

為何 Groovy 支持？

Groovy 的 . 操作符被重載為動態屬性訪問，編譯器將 obj.("name"+1) 轉換為 obj.getProperty("name1") 呼叫。JS 為保持語法簡潔與解析效率，未採用此設計。

正確寫法與最佳實踐

const temp = { name1: 'a', name2: 'b', name3: 'c' };

// ✅ 正確：方括號語法 + 模板字符串
for (let i = 1; i <= 3; i++) {
  console.log(temp[`name${i}`]);  // 輸出 a, b, c
}

// ✅ 正確：Object.keys 遍歷
Object.keys(temp).forEach(key => console.log(temp[key]));

// ❌ 錯誤：點語法配合表達式
// temp.("name" + 1)  // SyntaxError: Unexpected string

進階應用場景

1. 動態表單數據收集

function collectFormData(prefix, count) {
  const data = {};
  for (let i = 1; i <= count; i++) {
    const key = `${prefix}${i}`;
    data[key] = document.getElementById(key)?.value;
  }
  return data;
}

2. 安全屬性訪問（可選鏈）

// ES2020 可選鏈操作符
const value = obj?.[dynamicKey]?.nestedProp;  // 任意環節為 null/undefined 返回 undefined

3. Proxy 實現動態屬性代理

const handler = {
  get(target, prop) {
    if (prop.startsWith('name')) {
      const index = prop.slice(4);
      return target[`data_${index}`];
    }
    return target[prop];
  }
};
const proxy = new Proxy({ data_1: 'value1' }, handler);
console.log(proxy.name1);  // 'value1' - 實現了點語法動態訪問

總結

• JS 僅方括號語法支援動態鍵，點語法要求靜態標識符
• 現代 JS 推薦使用 obj[`key${i}`] 模板字符串，可讀性最佳
• 需「點語法動態訪問」時，可用 Proxy 或封裝 getProp(obj, 'name'+i) 工具函數
• 這是語言設計選擇，非缺陷——靜態分析友好、解析器簡單、運行時性能優