从零实现前端数据格式化工具：以船员经验数据展示为例

一、业务背景与需求分析

在管理系统开发中，经常需要处理复杂的船员经验数据。这些数据通常具有以下特点：

字段多样性：包含持续时间、职位等级、船名、引擎类型等多个维度
数据不确定性：不同船员的经验记录字段差异大（有的有引擎类型，有的没有）
展示复杂性：需要在有限空间内清晰呈现多维度信息

传统方案往往采用固定模板渲染，导致界面冗长且缺乏灵活性。本文将介绍一种基于动态字段组合的数据格式化方案，通过智能拼接实现"千人千面"的展示效果。

二、核心实现思路

2.1 设计原则

防御性编程：全面处理空值、非法输入
动态组合：根据实际数据自动选择显示字段
语义化输出：保持可读性的结构化文本
扩展优先：易于添加新字段而不破坏现有逻辑

2.2 技术选型

TypeScript：提供强类型支持，明确接口契约
函数式编程：使用纯函数保证可预测性
管道模式：通过链式调用构建数据处理流水线

三、完整代码实现

TypeScript 复制代码

/**
 * 将船员经验数据数组转换为格式化字符串
 * @param list 船员经验数据数组，可能为null/undefined/空数组
 * @returns 格式化后的展示字符串
 * 
 * @example
 * // 返回 "5day/Captain/Oceanic/V12/Approved;\nEngineer/Voyager"
 */
const getExperienceLines = (list: any[] | undefined | null) => {
    // 1. 输入验证阶段
    if (!list || !Array.isArray(list) || !list.length) return '';

    // 2. 数据处理流水线
    return list
        .map((item: any) => processExperienceItem(item))
        .filter(Boolean) // 过滤掉空结果项
        .join(';\n');    // 项目间分隔符
};

/**
 * 处理单个船员经验数据项
 */
const processExperienceItem = (item: any) => {
    const parts: string[] = [];

    // 3. 动态字段收集器
    collectDuration(item, parts);
    collectRank(item, parts);
    collectVesselName(item, parts);
    collectEngineClass(item, parts);
    collectSignOff(item, parts);

    // 4. 结果生成策略
    return parts.length > 0 ? parts.join('/') : '--';
};

// 各字段收集器（独立可测试）
const collectDuration = (item: any, parts: string[]) => {
    if (item?.duration != null) {
        parts.push(`${item.duration}day`);
    }
};

const collectRank = (item: any, parts: string[]) => {
    if (item?.rank) {
        parts.push(item.rank);
    }
};

const collectVesselName = (item: any, parts: string[]) => {
    if (item?.vesselName) {
        parts.push(item.vesselName);
    }
};

const collectEngineClass = (item: any, parts: string[]) => {
    if (item?.engineClass != null && item.engineClass !== '') {
        parts.push(item.engineClass);
    }
};

const collectSignOff = (item: any, parts: string[]) => {
    if (item.signOff) {
        parts.push(`${item.signOff}`);
    }
};

四、关键技术点解析

4.1 输入验证机制

TypeScript 复制代码

if (!list || !Array.isArray(list) || !list.length) return '';

三层防护：同时检查空引用、类型安全和内容有效性
短路返回：避免无效计算消耗资源
隐式转换：统一返回字符串类型便于后续处理

4.2 动态字段收集系统

每个字段收集器遵循严格规则：

非空校验 ：!= null 同时排除 undefined 和 null
存在性检查：可选链操作符防止属性访问错误
特殊处理：对 duration 追加单位后缀，engineClass 额外过滤空字符串

4.3 结果生成策略

TypeScript 复制代码

return parts.length > 0 ? parts.join('/') : '--'

优雅降级：无有效字段时显示占位符而非空字符串
层级表达：斜杠分隔符自然形成信息层级关系
格式统一：确保所有条目具有相同结构特征

五、单元测试示例

TypeScript 复制代码

describe('getExperienceLines', () => {
    test('处理空输入', () => {
        expect(getExperienceLines(null)).toBe('');
        expect(getExperienceLines([])).toBe('');
    });

    test('完整数据场景', () => {
        const data = [{
            duration: 5,
            rank: 'Captain',
            vesselName: 'Oceanic',
            engineClass: 'V12',
            signOff: 'Approved'
        }];
        expect(getExperienceLines(data)).toBe('5day/Captain/Oceanic/V12/Approved');
    });

    test('部分字段缺失', () => {
        const data = [{ rank: 'Engineer' }, {}];
        expect(getExperienceLines(data)).toBe('Engineer;\n--');
    });
});

六、性能优化建议

记忆化缓存：对相同输入返回缓存结果
惰性求值：仅当需要时才执行字段收集
批量处理：大数据量时采用分块处理策略
Web Worker：复杂计算移入后台线程

七、扩展实践方向

国际化支持：通过配置对象支持多语言字段映射
自定义分隔符：允许外部传入分隔符配置
字段权重系统：按重要性排序显示字段
富文本扩展：支持Markdown或HTML格式增强

八、总结

本方案通过模块化设计和防御性编程，实现了高度灵活的数据格式化能力。其核心价值在于：

降低维护成本：新增字段只需添加收集器函数
提升代码质量：单一职责原则确保模块独立性
增强用户体验：自适应布局适应各种数据形态

这种架构模式特别适合需要处理异构数据的前端应用场景，为复杂业务场景下的数据展示提供了可靠的解决方案。