javascript国际化键值对合并需用递归函数deepmerge,逐层判断对象类型并合并,避免浅覆盖;支持按语言缓存、扁平key转嵌套结构,确保多语言包语义完整性和嵌套key正确处理。

JavaScript 中对接口返回的国际化键值对进行合并处理,核心是把多个语言包(如 zh-CN、en-US)的键值结构递归合并,避免浅层覆盖,支持嵌套 key(如 user.login.title),同时保留各语言语义完整性。
用递归合并替代 Object.assign
Object.assign 或展开运算符只能做一层合并,遇到嵌套对象会直接替换。应手写递归函数,逐层遍历:
- 若两个值都是对象,继续递归合并
- 若目标已有该 key 且值为字符串/基本类型,以新语言包为准(即“后加载的覆盖先加载的”,符合 i18n 按需加载逻辑)
- 若 key 不存在,直接赋值
示例函数:
function deepMerge(target, source) {
for (const key in source) {
if (source.hasOwnProperty(key)) {
if (typeof target[key] === 'object' && typeof source[key] === 'object' && target[key] !== null && source[key] !== null) {
deepMerge(target[key], source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
}按语言维度统一收集再合并
接口可能分批返回不同语言包(如先请求 /i18n/zh,再请求 /i18n/en),建议用 Map 或普通对象按语言缓存原始数据,等全部就绪再合并成一棵扁平或嵌套树:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 保持原始结构:每个语言包本身已是嵌套对象(如
{ user: { login: { title: '登录' } } }) - 合并时以「语言为单位」传入
deepMerge,而非以「单个 key」为单位拼接 - 可封装为
addLocale(lang, messages)方法,内部维护全局messagesCache
支持点号路径的扁平化键自动转嵌套结构
有些后端返回的是扁平 key(如 {"user.login.title": "登录", "user.logout": "退出"}),前端需先转换为嵌套对象再合并:
- 遍历所有 key,用
key.split('.')拆解路径 - 逐级创建子对象,最后赋值叶子节点
- 转换后再调用
deepMerge合并到主语言树中
简单转换工具示例:
function flatToNested(flatObj) {
const result = {};
for (const [key, value] of Object.entries(flatObj)) {
const keys = key.split('.');
let ref = result;
for (let i = 0; i 注意合并顺序与运行时切换场景
用户切换语言时,并非重新加载全部资源,而是动态注入新语言包并合并 —— 此时要确保:
- 旧语言未被污染:合并只影响新增/变更的 key,不删除已存在但新包未提供的字段
- 组件响应式更新:如果用 React/Vue,确保合并后触发 i18n 实例的更新通知(如调用
i18n.setLocale()或更新 reactive 对象) - 避免重复合并:对同一语言包多次调用应幂等(可加语言标识去重判断)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










