17370845950

本文讲解如何使用方括号语法（bracket notation）通过字符串变量动态访问 json 对象属性，替代冗长的 if-else 判断链，提升代码可维护性与可读性。

在前端开发中，尤其是 ASP.NET WebForms 这类服务端渲染场景下，常需将服务端生成的控件 ID 与 JSON 数据字段名映射后，在客户端统一更新多个 DOM 元素。原始实现中，开发者为每个字段编写独立的 if (fld === "XXX") 分支，不仅重复冗余，还严重违背 DRY（Don’t Repeat Yourself）原则，且难以扩展和维护。

幸运的是，JavaScript 提供了方括号语法（bracket notation），允许我们使用字符串变量作为属性名来动态访问对象属性。这与点号语法（dot notation）功能等价，但具备运行时灵活性：

// 等价写法：
obj.fieldName      // ✅ 静态属性名（编译期确定）
obj["fieldName"]     // ✅ 动态属性名（运行时确定）
obj[fld]             // ✅ fld 是字符串变量，如 "StreetAddress"

因此，您原始 JavaScript 循环中大量重复的分支逻辑：

if (fld === "PostalCode") {
  idhdn.value  = data.PostalCode;
  id.innerHTML = data.PostalCode;
}
if (fld === "StreetAddress") {
  idhdn.value  = data.StreetAddress;
  id.innerHTML = data.StreetAddress;
}
// ……还有 20+ 个类似判断

可被简洁、安全地重构为：

function SellerShareholder_OnChange(ddl, ctrlList) {
  waitOn();
  PageMethods.UpdateShareholderInfo(GetSelectedOptionValue(ddl), onSuccess, onError);

  function onSuccess(result) {
    const data = JSON.parse(result);

    for (let i = 0; i < ctrlList.length; i++) {
      const { fieldName, clientId } = ctrlList[i];
      const element = document.getElementById(clientId);
      const hiddenInput = document.getElementById(clientId + "hdn");

      // ✅ 动态访问 data[fieldName]，无需硬编码字段名
      const value = data[fieldName];

      if (element) element.innerHTML = value;
      if (hiddenInput) hiddenInput.value = value;
    }

    waitOff();
  }

  function onError(result) {
    waitOff();
    alert('Something went wrong.');
  }
}

✅ 优势总结：

• 简洁性：一行 data[fieldName] 替代 N 个 if 分支；
• 可扩展性：新增字段只需在 C# 的 ClientId 列表中添加一项，JS 层零修改；
• 健壮性：建议配合 undefined 检查（如 if (value !== undefined)）或可选链 data?.[fieldName]（ES2025+）进一步增强容错能力；
• 语义清晰：明确表达了“按配置映射字段 → 更新对应 DOM”的数据驱动逻辑。

⚠️ 注意事项：

• 确保 fieldName 字符串严格匹配 JSON 中的键名（区分大小写）；
• 若后端返回字段可能缺失，推荐使用 data[fieldName] ?? "" 或 String(data[fieldName] || "") 防止 undefined 渲染问题；
• 避免在 fieldName 中传入用户可控内容（如未校验的输入），以防原型污染或意外访问（本例中字段名由服务端静态定义，属安全场景）。

综上，利用方括号语法实现动态属性访问，是处理此类“配置驱动 DOM 更新”场景的标准、高效且专业的方式。