1. 合并前端主题配置
前端开发者背景
开发一个可定制主题的组件库,用户可能只修改部分颜色,其他样式需使用默认值。
问题
需要将用户传入的局部配置与完整的默认配置深度合并,生成最终配置。
如何使用
将默认主题对象作为“目标对象”,将用户自定义配置对象作为“来源1”进行合并。
目标对象:{"theme":{"primary":"#007bff","secondary":"#6c757d","font":{"size":"16px","family":"Arial"}}}
来源1:{"theme":{"primary":"#ff5722","font":{"family":"Helvetica"}}}
结果
得到合并后的配置:{"theme":{"primary":"#ff5722","secondary":"#6c757d","font":{"size":"16px","family":"Helvetica"}}}。用户的自定义值(主色、字体)覆盖了默认值,而未定义的次要颜色和字体大小则保留了默认值。
2. 补全 API 响应数据
背景
从外部 API 获取的用户资料数据可能不完整,某些可选字段可能缺失,但前端组件需要完整的数据结构来渲染。
问题
需要为 API 返回的 JSON 数据补全所有缺失字段的默认值,防止渲染错误。
如何使用
将 API 返回的数据对象作为“目标对象”,将一个包含所有字段及默认值的模板对象作为“来源1”。
目标对象:{"id":123,"name":"张三","profile":{"avatar":"url.jpg"}}
来源1:{"id":0,"name":"未知","profile":{"avatar":"default.jpg","bio":"","location":""},"settings":{"notifications":true}}
结果
得到完整的数据对象:{"id":123,"name":"张三","profile":{"avatar":"url.jpg","bio":"","location":""},"settings":{"notifications":true}}。API 返回的 `id`、`name`、`avatar` 被保留,缺失的 `bio`、`location` 和整个 `settings` 对象被补全。