17370845950

在 javascript 中，无法用点号（`.`）直接结合变量名访问对象属性；必须改用方括号语法 `obj[variable]`，才能将变量值作为动态键名获取嵌套属性（如 `price[opt].savings`）。

当你需要根据用户选择（例如下拉框 的选中值）动态读取对象中某一项的属性时，点号语法（dot notation）不支持变量插值——像 price.${opt}.savings 或 price.!opt.savings 这类写法在 JavaScript 中是语法错误，ES6 模板字符串（`${opt}`）仅适用于字符串拼接，不能用于属性访问。

✅ 正确做法是使用方括号语法（bracket notation）：
它允许你传入一个字符串、变量或表达式作为属性名，从而实现动态访问：

const price = {
  option1: { type: 'R-11', rValue: 11, savings: 0.20, pct: 0.12 },
  option2: { type: 'R-13', rValue: 13, savings: 0.22, pct: 0.12 },
  option3: { type: 'R-19', rValue: 19, savings: 0.24, pct: 0.12 }
};

$(function() {
  $("#select").on('change', function() { // 推荐用 'change' 替代 'blur'，语义更准确
    const opt = $(this).val(); // 获取选中 option 的 value 值（如 "option1"）

    // ✅ 动态访问：price["option1"].savings → 0.20
    const result = price[opt]?.savings ?? 'N/A'; // 使用可选链 + 空值合并，增强健壮性

    $("#result").text(result); // 注意：原示例中 ID 是 "result"，非 "results"
  });
});

? 关键要点说明：

• price[opt] 等价于 price["option1"]（当 opt === "option1"），返回对应子对象；
• 后续 .savings 是对返回对象的静态属性访问，合法且高效；
• 推荐添加空值检查（如 ?. 和 ??），避免 opt 为空、无效值（如 "" 或 "option4"）导致 Cannot read property 'savings' of undefined 错误；
• 事件建议使用 'change' 而非 'blur'，因 的值变更通常由用户选择触发，change 更可靠且兼容性更好；
• 确保 HTML 中目标元素 ID 与 JS 一致（示例中应为 ，而非 id="results"）。

? 扩展提示：若需深层动态路径（如 price[opt].details.cost），仍可组合使用：price[opt]?.details?.cost；但复杂路径建议封装为工具函数或使用 Lodash 的 _.get(price, ['option1', 'savings']) 提升可维护性。