本文介绍使用 JavaScript 的 flatMap() 方法,将满足条件(如 flex 数组中含 'LB')的单个数据对象按比例拆分为两个新对象(分别对应 'L' 和 'B'),并确保最终结果为扁平化数组。
本文介绍使用 javascript 的 `flatmap()` 方法,将满足条件(如 `flex` 数组中含 `'lb'`)的单个数据对象按比例拆分为两个新对象(分别对应 `'l'` 和 `'b'`),并确保最终结果为扁平化数组。
在实际数据处理场景中,常需对具有复合状态(如 'LB')的对象进行语义拆分——例如将一个代表“L+B联合配置”的记录,按预设权重(如 fractionL = 0.2、fractionB = 0.7)分离为纯 'L' 和纯 'B' 的独立条目。若沿用 .map(),遇到需“一变二”的情况时会生成嵌套数组(如 [objL, objB] 被包裹在子数组中),破坏结果结构的扁平性。
正确解法是改用 .flatMap():它会对每个输入项调用映射函数,并自动将返回的数组“展平一层”,从而天然支持“单输入 → 多输出”的转换逻辑。
以下是完整实现示例:
function addData() { const data = [ { period: '2024-12-31T00:00:00.000Z', USD: 1000 }, { period: '2024-12-31T00:00:00.000Z', USD: 800 }, { period: '2024-12-31T00:00:00.000Z', USD: 1200 } ]; const fractionL = 0.2; const fractionB = 0.7; return data.flatMap((row) => { const object = { ...row, flex: createFlex(row) }; // 若 flex 中存在 'LB',则拆分为两个对象 if (object.flex.includes('LB')) { const usdForL = fractionL * object.USD; const usdForB = fractionB * object.USD; const objectForL = { ...object, flex: object.flex.map(status => status === 'LB' ? 'L' : status), USD: usdForL }; const objectForB = { ...object, flex: object.flex.map(status => status === 'LB' ? 'B' : status), USD: usdForB }; return [objectForL, objectForB]; // ✅ 返回数组,由 flatMap 自动展平 } // 不含 'LB' 的对象保持原样(单元素返回,flatMapp 自动处理) return object; });}function createFlex(row) { // 示例逻辑:为演示统一返回含 'LB' 的数组 return ['LB', 'L', 'B'];}console.log(addData());// 输出示例(简化):// [// { period: "...", USD: 200, flex: ['L','L','L'] },// { period: "...", USD: 700, flex: ['B','B','B'] },// { period: "...", USD: 800, flex: ['L','L','B'] }, // 原始不含 LB 的项保留// ...// ]
关键要点与注意事项:
通过此方法,你可在保持函数式编程风格的同时,精准、高效地实现复合状态对象的语义化拆分,输出结构清晰、可直接用于后续渲染或计算的扁平化数据集。