本文详解如何在 javascript 中通过字符串变量（如数组中读取的字段名）安全、简洁地访问 json 对象的属性，避免冗长的 if 判断链，并提供可维护、可扩展的 dom 更新方案。
在 ASP.NET WebForms 项目中，常需通过客户端脚本（如 PageMethods）异步获取 JSON 数据，并将不同字段值填充到多个服务端控件对应的 DOM 元素中。你当前的代码通过硬编码 if (fld === "PostalCode") { ... data.PostalCode ... } 方式逐个处理字段，不仅重复冗长，还严重降低可维护性——尤其当字段数增至 25+ 时，极易遗漏或出错。
核心解决方案：使用方括号（Bracket）语法替代点号（Dot）语法
JavaScript 中，obj.property 与 obj["property"] 完全等价；而后者支持运行时计算的字符串作为键名，这正是动态字段访问的关键：
// ✅ 正确：用变量 fieldName 动态取值 const value = data[fld]; // 等效于 data["StreetAddress"]、data["PostalCode"] 等 // ❌ 错误：data.fld 会查找名为 "fld" 的字面属性，而非变量值 const wrong = data.fld;
据此，你的 onSuccess 回调可大幅精简为：
function onSuccess(result) {
const data = JSON.parse(result);
for (let i = 0; i < ctrlList.length; i++) {
const { fieldName, clientId } = ctrlList[i];
const id = document.getElementById(clientId);
const idhdn = document.getElementById(clientId + "hdn");
// ✅ 统一通过 fieldName 动态访问 data 中对应字段
const fieldValue = data[fieldName];
if (idhdn) idhdn.value = fieldValue ?? "";
if (id) id.innerHTML = fieldValue ?? "";
}
waitOff();
}? 提示：?? "" 提供空值安全兜底，避免 undefined 或 null 导致 DOM 显示异常。
进阶优化建议（提升健壮性与可读性）
-
字段存在性校验：避免因后端 JSON 缺失某字段导致 data[fieldName] 为 undefined：
if (!(fieldName in data)) { console.warn(`Missing expected field: ${fieldName} in response`); continue; } -
批量 DOM 操作封装：提取共用逻辑为函数，增强复用性：
function updateControl({ clientId, fieldName }, data) { const id = document.getElementById(clientId); const idhdn = document.getElementById(clientId + "hdn"); const value = data[fieldName] ?? ""; if (idhdn) idhdn.value = value; if (id) id.innerHTML = value; } // 调用处 ctrlList.forEach(ctrl => updateControl(ctrl, data)); 服务端序列化注意：确保 C# 中 jsonScriptSerializer.Serialize(ids) 输出标准 JSON（如使用 System.Text.Json.JsonSerializer 或 Newtonsoft.Json.JsonConvert），且字段名大小写与前端 JS 变量严格一致（JS 区分大小写）。
总结
用 object[variableName] 替代 if/else 链是 JavaScript 动态属性访问的标准实践。它不仅让代码更简洁、可扩展，也显著降低维护成本。结合空值处理、存在性检查与逻辑封装，即可构建出稳定、专业、面向未来的客户端数据绑定方案。
