本文介绍如何使用 Lodash 的 mergeWith 高效计算两个结构一致的对象数组中嵌套数值字段（如 rawValue）的相对变化率，并生成带格式化字符串结果的新数组。
本文介绍如何使用 lodash 的 `mergewith` 高效计算两个结构一致的对象数组中嵌套数值字段（如 `rawvalue`）的相对变化率，并生成带格式化字符串结果的新数组。
在实际业务场景中（如多时间点 API 数据对比），我们常需对两组结构相同、按 ID 对齐的对象数组进行逐项数值差异分析。例如，对比「昨日」与「今日」销售数据的变动百分比（即相对方差：(旧值 - 新值) / 旧值 × 100%）。关键挑战在于：既要精准匹配同 ID 对象，又要深入嵌套结构（如 values.sales.rawValue）提取并计算差异，同时保持输出结构清晰、数值格式统一（如保留小数位、强制显示 .0）。
以下方案采用 Lodash 的 mergeWith —— 它支持自定义合并逻辑，能递归遍历对象树并在指定键（如 "rawValue" 或 "value"）处注入计算逻辑，避免手写深层遍历和 ID 映射，大幅提升可读性与健壮性。
✅ 核心实现步骤
- 定义差异计算函数：计算相对变化率（百分比），并确保输入为数字；
- 定义格式化函数：使用 Intl.NumberFormat 统一输出格式（最小 1 位、最多 20 位小数，自动补零）；
- 编写合并器：利用 mergeWith(arr1, arr2, customizer)，仅对目标键（rawValue/value）执行计算，其余字段由 Lodash 默认递归合并；
- 保证结构一致性：该方法默认要求两数组长度相等、对象顺序与 id 严格对应（若需按 id 动态匹配，请额外添加预处理步骤）。
? 完整可运行代码示例
// 引入 Lodash（CDN 或 npm install lodash）
// <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
const numberFormatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 1,
maximumFractionDigits: 20,
});
// 计算相对变化率（百分比）：(旧值 - 新值) / 旧值 × 100
const calculateVariance = (oldVal, newVal) => {
const a = Number(oldVal);
const b = Number(newVal);
return isNaN(a) || isNaN(b) || a === 0 ? NaN : ((a - b) / a) * 100;
};
// 格式化为带小数位的字符串（如 63 → "63.0"；1.123456789 → "1.123456789"）
const formatVariance = (oldVal, newVal) =>
numberFormatter.format(calculateVariance(oldVal, newVal));
// 主函数：合并两数组，对 rawValue 和 value 键注入差异计算逻辑
function combineWithVariance(arr1, arr2) {
return _.mergeWith(arr1, arr2, (objValue, srcValue, key) => {
if (key === "rawValue") {
return calculateVariance(objValue, srcValue);
}
if (key === "value") {
return formatVariance(objValue, srcValue);
}
// 其他键返回 undefined → 触发 Lodash 默认合并策略（覆盖或递归）
});
}
// 示例数据
const arrayOne = [
{ id: 1, values: { sales: { rawValue: 3, value: '3.0' } } },
{ id: 2, values: { sales: { rawValue: 1, value: '1.0' } } }
];
const arrayTwo = [
{ id: 1, values: { sales: { rawValue: 1.1, value: '1.1' } } },
{ id: 2, values: { sales: { rawValue: 2, value: '2.0' } } }
];
// 执行计算
const result = combineWithVariance(arrayOne, arrayTwo);
console.log(result);
// 输出：
// [
// { id: 1, values: { sales: { rawValue: 63.333333333333336, value: "63.333333333333336" } } },
// { id: 2, values: { sales: { rawValue: -100, value: "-100.0" } } }
// ]⚠️ 注意事项与最佳实践
- 结构前提：arrayOne 与 arrayTwo 必须长度一致且对象顺序严格对应（即 arrayOne[0].id === arrayTwo[0].id）。若实际数据无序或存在增删，建议先用 _.keyBy() 构建 Map，再按 id 显式合并；
- 空值/异常处理：示例中已加入 isNaN 和除零检查，返回 NaN；生产环境可进一步抛出自定义错误或返回 null/undefined 并配合 ?. 操作符安全访问；
- 字段灵活性：当前逻辑硬编码处理 rawValue/value，如需扩展至 profit.rawValue、cost.value 等，可将目标路径抽象为配置项（如 ['values', 'sales', 'rawValue']），结合 _.get/_.set 实现通用化；
- 性能考量：对于超大数据集（>10k 对象），mergeWith 的递归开销可能升高，此时建议改用 map + find 手动索引匹配，或借助 Map 做 O(1) 查找。
✅ 总结
通过 _.mergeWith 的自定义合并器，我们以声明式方式实现了嵌套对象数组的精准差异计算——无需手动遍历、无需重复映射 ID、无需破坏原始结构。配合 Intl.NumberFormat 的智能格式化，输出结果既满足业务精度要求，又具备良好的可读性与国际化支持。该模式可轻松复用于其他指标对比场景（如同比、环比、目标完成率等），是前端数据对比类需求的高效标准化解法。
