如何将JavaScript数组对象转换映射为指定结构的对象

原始数据结构 #

主对象data下的criticalErrorsData数组结构如下：

[
    {
        "EmployeeName": {
            "FirstName": "Joe",
            "LastName": "Doe",
            "Suffix": null
        },
        "CriticalErrorCount": 4,
        "HomeDepartment": "Belgrade",
        "SupervisorName": {
            "FirstName": "Test",
            "LastName": "Test",
            "Suffix": null
        }
    }
]

目标转换结构 #

需要将上述数组转换为如下结构：

const criticalErrorsData = [
    { 
        supervisor: SupervisorName.FirstName + SupervisorName.LastName, 
        department: HomeDepartment, 
        errors: CriticalErrorCount, 
        employee: EmployeeName.FirstName + EmployeeName.LastName 
    },
    // ...其他元素
];

实现方法 #

你尝试的map()方法完全可行，不需要引入任何辅助变量，直接用数组的map()方法就能完成转换。

你的代码逻辑是正确的，只要变量名与实际数据匹配，运行后就能得到目标结构的数组。如果想让代码更简洁易读，可以用对象解构提取属性，同时用模板字符串优化名称拼接，示例如下：

const criticalErrorsData = data.criticalErrorsData.map(({ EmployeeName, CriticalErrorCount, HomeDepartment, SupervisorName }) => ({
    supervisor: `${SupervisorName.FirstName} ${SupervisorName.LastName}`,
    department: HomeDepartment,
    errors: CriticalErrorCount,
    employee: `${EmployeeName.FirstName} ${EmployeeName.LastName}`
}));

注：如果存在FirstName或LastName为null/undefined的情况，可以添加空值兜底，比如(SupervisorName.FirstName || '') + ' ' + (SupervisorName.LastName || '')，避免出现nullTest这类异常拼接结果。

内容的提问来源于stack exchange，提问作者lonelydev101