Fusionner deux tableaux d'objets dynamiques : fusionner deux tableaux d'objets dynamiques en un seul

Question

J'ai un tableau dynamique de deux objets comme indiqué ci-dessous (il s'agit d'un tableau dynamique de n objets) :

serverArray = [
    {"id": "field1", "mandatory": false, "visible": false},
    {"id": "champ2", "mandatoire": faux, "visible": faux},
    {"id": "champ3", "mandatoire": faux, "visible": faux},
    {"id": "champ4", "obligatoire": faux, "visible": faux}
]

localArray = [
    {"id": "champ1"},
    {"id": "field2", "mandatory": false},
    {"id": "field3", "mandatory": true, "visible": false},
    {"id": "field4", "mandatory": false, "visible": true},
    {"id": "field5", "mandatory": false, "visible": true},
    {"id": "field6", "mandatory": true, "visible": false},
]≪/pré>
<p>J'ai fusionné les deux tableaux en un objet avec le même ID comme ceci : </p>
<pre class="brush:php;toolbar:false;">for (let x = 0; x < serverArray.length; x++) {
    pour (soit y = 0; y < localArray.length; y++) {
        if (serverArray[x].id == localArray[y].id) { // serverArray[x].id/localArray[y].id = 'field1', 'field2'
            for (laisser la clé dans localArray[y]) { //key = 'id', 'mandatory', etc.
                serverArray[x][key] = localArray[y].hasOwnProperty(key) ? localArray[y][key] : serverArray[x][key]; //Remplacer par la valeur de l'attribut de champ local (si présent) dans la réponse finale renvoyée
            }
        }
    }
}</pré>
<p>Cependant, je souhaite également inclure dans le <code>serverArray</code> final les identifiants qui ne sont pas dans <code>serverArray</code> ci-dessus code>, <code>field6</code>), et ces champs échoueront également à la condition ci-dessus (c'est-à-dire <code>serverArray[x].id == localArray[y].id</code>), J'espère que ces champs sont également inclus dans le <code>serverArray</code> final, c'est-à-dire que mon <code>serverArray</code> final devrait également contenir les deux objets suivants : </p>
<pre class="brush:php;toolbar:false;">{"id":"field5","mandatory":false,"visible":true},
{"id": "field6", "mandatory": true, "visible": false},

Existe-t-il un moyen de répondre à cette exigence ?

Answer 1

En parcourant les deux tableaux, vous pouvez créer un nouvel objet pour suivre les champs fusionnés. Après la fusion initiale, vous pouvez parcourir à nouveau le localArray pour identifier les champs qui n'ont pas encore été fusionnés dans le serverArray et les ajouter au résultat fusionné.

let mergedFields = {};

// 根据共同的ID进行初始合并
for (let y = 0; y < localArray.length; y++) {
    const localField = localArray[y];
    const serverField = serverArray.find(field => field.id === localField.id);

    if (serverField) {
        mergedFields[localField.id] = {
            ...serverField,
            ...localField
        };
    } else {
        mergedFields[localField.id] = localField;
    }
}

// 添加在mergedFields中不存在的剩余localArray字段
for (let y = 0; y < localArray.length; y++) {
    const localField = localArray[y];
    if (!mergedFields.hasOwnProperty(localField.id)) {
        mergedFields[localField.id] = localField;
    }
}

// 将mergedFields对象转换回数组
const mergedServerArray = Object.values(mergedFields);

console.log(mergedServerArray);