如何通过用户单选输入的字符串变量获取对应JS对象的属性值

问题原因 #

你当前拿到的bikeSelc是字符串类型的值（比如"UA"），并不是你提前定义的UA对象本身，字符串类型没有brakes属性，所以自然无法读到对应值。你硬编码写UA.brakes是直接访问了全局作用域下的UA对象，所以可以正常运行。

最优解决方案 #

推荐把所有自行车配置统一存放到一个对象映射表中，映射表的key和你单选按钮返回的字符串值对应，value就是对应的配置对象，之后就可以用字符串作为key读取到对应的配置对象。

改造配置代码

// 把所有自行车配置放到统一的bikeConfig映射表里
const bikeConfig = {
  UA: {
    brakes: "shimano b10s",
    backTire: " Bigben 26",
    frontTire: "bigben 20",
    bikeChain: " 1/32 single speed",
    motorBrand: " Bosch Intuvia, cargoline",
  },
  cargoCarla: {
    brakes: "shimano b10s", // 注意你原代码里这里拼错为breaks，要和其他对象字段统一为brakes，否则会返回undefined
    backTire: "big apple 24",
    frontTire: "big apple 20",
    bikeChain: "na",
    motorBrand: "na",
  }
}

改造提交事件代码

var form = document.querySelector("form");
var log = document.querySelector("#log");
var showComponent = document.querySelector("#showComponent"); // 记得先获取你要渲染内容的DOM节点，否则会报错

form.addEventListener(
  "submit",
  function (event) {
    event.preventDefault(); // 建议把阻止默认行为放到最前面，避免页面意外跳转
    var data = new FormData(form);
    var output = "";
    for (const entry of data) {
      output = output + entry[0] + "=" + entry[1] + "\r";
    }
    var splitOut = output.split("=");
    var bikeSelc = splitOut[1].toString();
    // 从映射表里取对应的配置对象再访问属性
    const selectedBike = bikeConfig[bikeSelc]
    // 加容错判断，避免拿到不存在的车型key时报错
    if (selectedBike) {
      showComponent.textContent = selectedBike.brakes;
    } else {
      showComponent.textContent = "未找到对应车型配置"
    }
  },
  false
);

其他说明 #

如果你的配置对象是定义在全局作用域下，也可以用window[bikeSelc].brakes的方式读取属性，但这种方式非常不推荐，全局变量容易造成命名冲突、数据被意外修改，后续新增车型也不好维护，优先使用映射表的方案。

内容的提问来源于stack exchange，提问作者Jay Barros