ES6 JavaScript: 根据数组元素匹配添加字段

ES6: 根据数组元素匹配添加字段

本示例演示如何使用 ES6 的 map 和 find 方法，根据 arr1 中的 craftSubType 字段值匹配 formList 中的 type 字段值，在匹配的 formList 元素中添加 required: true 字段，否则添加 required: false 字段。

示例数据：

const formList = [
    {label:'冲压责任人',value:'stampingUser',type:1},
    {label:'焊接责任人',value:'weldUser',type:2},
    {label:'机加责任人',value:'machiningUser',type:5},
    {label:'装配责任人',value:'assembleUser',type:6},
    {label:'排气责任人',value:'ventingUser',type:4},
    {label:'电泳责任人',value:'electrophoresisUser',type:3}
];

const arr1 = [
    {
        'craftSubType': '1'
    },
    {
        'craftSubType': '2'
    },
    {
        'craftSubType': '5'
    },
    {
        'craftSubType': '3'
    },
    {
        'craftSubType': '3'
    },
    {
        'craftSubType': '6'
    },
    {
        'craftSubType': '4'
    },
    {
        'craftSubType': '4'
    },
    {
        'craftSubType': '4'
    },
    {
        'craftSubType': '4'
    }
];

ES6 代码：

const updatedFormList = formList.map(item => {
    const matchingCraftSubType = arr1.find(subItem => subItem.craftSubType === item.type);
    if (matchingCraftSubType) {
        return {
            ...item,
            required: true
        };
    } else {
        return {
            ...item,
            required: false
        };
    }
});

代码说明：

1. map 方法遍历 formList 数组的每个元素 item。
2. find 方法在 arr1 数组中查找 craftSubType 与 item.type 相等的元素 subItem。
3. 如果找到匹配项，则将 required: true 添加到 item 对象中；否则添加 required: false。
4. updatedFormList 数组将包含所有 formList 元素，并根据匹配结果添加了 required 字段。

示例输出：

updatedFormList: [
    {label:'冲压责任人',value:'stampingUser',type:1, required: true},
    {label:'焊接责任人',value:'weldUser',type:2, required: true},
    {label:'机加责任人',value:'machiningUser',type:5, required: true},
    {label:'装配责任人',value:'assembleUser',type:6, required: true},
    {label:'排气责任人',value:'ventingUser',type:4, required: true},
    {label:'电泳责任人',value:'electrophoresisUser',type:3, required: true}
];

总结：

本示例利用 ES6 的 map 和 find 方法，简化了根据两个数组元素匹配添加字段的过程，提高了代码的可读性和效率。