javascript中對象的遞歸合並

Question

我目前正在使用React進行項目，使用setState方法合並兩個對象時遇到了問題。 我有兩個對象類似於

person1 = {
    name: 'ramya',
    age: 21,
    gender: 'f',
    skills:{
        technicalSkills: {
            languages: ['C', 'C++', 'Java'],
            operatingSystems: ['Unix', 'Linux']
        },
        linguisticSkills: {
            toSpeak: ['English', 'Tamil'],
            toRead: ['English']
        }
    },
}

obj2 = {
    skills: {
        linguisticSkills: {
            toRead: ['English', 'Tamil']
        }
    }
}

我想將人1的技能狀態更改為

linguisticSkills: {
                toSpeak: ['English', 'Tamil'],
                toRead: ['English', 'Tamil']
} 

skills.linguisticSkills.toSpeak和skills.linguisticSkills.toRead保持不變，即添加或刪除項目。 每當發生變化時，如何將set1中的person1和obj2合並，以便最終處於正確的狀態？

更新： _.merge在這種情況下失敗：

person1 = {
        name: 'ramya',
        age: 21,
        gender: 'f',
        skills:{
            technicalSkills: {
                languages: ['C', 'C++', 'Java'],
                operatingSystems: ['Unix', 'Linux']
            },
            linguisticSkills: {
                toSpeak: ['English', 'Tamil'],
                toRead: ['English', 'Tamil', 'Telugu']
            }
        },
    }

    obj2 = {
        skills: {
            linguisticSkills: {
                toRead: ['English', 'Tamil']
            }
        }
    }

它給出的結果與人1相同，而

{
        name: 'ramya',
        age: 21,
        gender: 'f',
        skills:{
            technicalSkills: {
                languages: ['C', 'C++', 'Java'],
                operatingSystems: ['Unix', 'Linux']
            },
            linguisticSkills: {
                toSpeak: ['English', 'Tamil'],
                toRead: ['English', 'Tamil']
            }
        },
    }

是期待。

Answer 1

Lodash的_.merge()是遞歸的。 如果您需要有關合並過程的更精細控制，則可以使用_.mergeWith() 。

 const person1 = {"name":"ramya","age":21,"gender":"f","skills":{"technicalSkills":{"languages":["C","C++","Java"],"operatingSystems":["Unix","Linux"]},"linguisticSkills":{"toSpeak":["English","Tamil"],"toRead":['English', 'Tamil', 'Telugu']}}} const obj2 = {"skills":{"linguisticSkills":{"toRead":["English","Tamil"]}}} const result = _.mergeWith({}, person1, obj2, (objValue, srcValue) => { if( _.isArray(srcValue)) { return srcValue; } }); console.log(result); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 

Answer 2

查看https： 如何進行深度合並而不是淺層合並？

/**
 * Simple object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

/**
 * Deep merge two objects.
 * @param target
 * @param ...sources
 */
export function mergeDeep(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return mergeDeep(target, ...sources);
}

// Code copied from linked Stack Overflow question
// https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge
// Answer by Salakar:
// https://stackoverflow.com/users/2938161/salakar