本文介绍在 JavaScript/TypeScript 中通过解构赋值（数组或对象）一次性声明多个 const 常量的规范写法，避免重复逻辑、提升可读性与可维护性，并兼容 React 组件中的静态配置场景。
本文介绍在 javascript/typescript 中通过解构赋值（数组或对象）一次性声明多个 `const` 常量的规范写法，避免重复逻辑、提升可读性与可维护性，并兼容 react 组件中的静态配置场景。
在实际开发中，尤其是基于配置驱动的前端项目（如多区域适配的 React 应用），我们常需根据运行时环境（如 landesvariante）一次性确定一组不可变的 UI 属性——例如 footerWidth、footerAltText 和 footerLogoSource。若采用传统逐个赋值方式，不仅易导致逻辑分散、重复判断，还可能因顺序依赖或未初始化引发潜在错误。
✅ 推荐方案：使用立即执行函数 + 解构赋值
该方案将配置逻辑集中封装，返回结构化数据后一次性解构为多个 const 变量，语义清晰、类型安全（TypeScript 下可精准推导）、且完全符合“不可变”设计原则。
✅ 方案一：数组解构（简洁直接，适合顺序固定、数量较少的场景）
const [footerWidth, footerAltText, footerLogoSource] = (() => {
const config = getAppConfig();
switch (config.landesvariante) {
case Variante.SN:
return ['30%', 'lorem ipsum', `${config.contextPath}/assets/kofin_eu_logo.svg`] as const;
case Variante.BB:
return ['20%', 'lorem ipsum 2', `${config.contextPath}/assets/logo_bb.svg`] as const;
default:
return [undefined, undefined, null] as const;
}
})();
? 提示：添加 as const 可使 TypeScript 推断出字面量元组类型（如 readonly ['30%', 'lorem ipsum', string]），增强类型安全性。
✅ 方案二：对象解构（语义更明确，便于扩展与维护）
const {
width: footerWidth,
altText: footerAltText,
logo: footerLogoSource
} = (() => {
const config = getAppConfig();
switch (config.landesvariante) {
case Variante.SN:
return {
width: '30%' as const,
altText: 'lorem ipsum' as const,
logo: `${config.contextPath}/assets/kofin_eu_logo.svg`
};
case Variante.BB:
return {
width: '20%' as const,
altText: 'lorem ipsum 2' as const,
logo: `${config.contextPath}/assets/logo_bb.svg`
};
default:
return { logo: null } as const;
}
})();
? 优势：属性名自解释性强；新增字段（如 footerHeight）无需调整解构顺序；配合 as const 可精确约束字符串字面量类型。
⚠️ 注意事项与最佳实践
- 避免副作用：确保 getAppConfig() 在组件渲染前已稳定（如在模块顶层或 useMemo 中调用），防止因多次执行导致不一致。
- 类型完整性：在 TypeScript 中，建议为返回值显式标注类型（如 type FooterConfig = { width: string; altText: string; logo: string | null }），提升可读性与 IDE 支持。
- React 中的使用：若这些常量用于函数组件内，建议将其移至组件外部顶层作用域（或 useMemo 中），避免每次渲染重复计算。
- 不要滥用 let + 赋值：原代码中通过 export let + 函数体内赋值的方式破坏了常量语义，也增加了模块耦合与测试难度，应彻底摒弃。
综上，利用 IIFE（立即执行函数）配合数组或对象解构，是声明多个关联常量的现代、简洁且健壮的解决方案——它既满足不可变性要求，又消除了重复逻辑，同时保持高度可读与可维护性。
