本文讲解如何使用方括号语法（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+ 个类似判断可被简洁、安全地重构为：
立即学习“Java免费学习笔记（深入）”；
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]（ES2020+）进一步增强容错能力；
- 语义清晰：明确表达了“按配置映射字段 → 更新对应 DOM”的数据驱动逻辑。
⚠️ 注意事项：
- 确保 fieldName 字符串严格匹配 JSON 中的键名（区分大小写）；
- 若后端返回字段可能缺失，推荐使用 data[fieldName] ?? "" 或 String(data[fieldName] || "") 防止 undefined 渲染问题；
- 避免在 fieldName 中传入用户可控内容（如未校验的输入），以防原型污染或意外访问（本例中字段名由服务端静态定义，属安全场景）。
综上，利用方括号语法实现动态属性访问，是处理此类“配置驱动 DOM 更新”场景的标准、高效且专业的方式。
