递归合并javascript中的对象 [英] Recursive merging of objects in javascript

问题描述

我目前正在使用react进行项目，并且在使用setState方法合并两个对象时遇到问题.我有两个类似于

I'm currently working on a project with react and I'm facing a problem in merging two objects when using setState method. I have two objects similar to

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']
        }
    }
}

我想将第一个人的技能状态更改为

I want to change state of person 1's skills.linguisticSkills to

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

skills.linguisticSkills.toSpeak和skills.linguisticSkills.toRead保持不变，即添加或删除项目.每当发生变化时，如何将set1中的person1和obj2合并，以便最终处于正确的状态?

skills.linguisticSkills.toSpeak and skills.linguisticSkills.toRead keep changing i.e items are added or removed. Whenever it is changes how do I merge person1 and obj2 in setState so I end up in the right state?

更新: _.merge在以下情况下失败:

UPDATE: _.merge fails for a case like this:

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相同，而

It gives the result same as person 1 whereas

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

是预期的.

推荐答案

Lodash的 _.merge() 是递归的.如果您需要对合并过程进行更精细的控制，则可以使用 _.mergeWith() .

Lodash's _.merge() is recursive. If you need more granular control about the merge process, you can use _.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>

这篇关于递归合并javascript中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！