使用Lodash进行深度合并

Deep Merge using Lodash

本文关键字：深度合并 Lodash 使用更新时间：2023-09-26

我有两个对象数组，其中包含有标签的地址和实际地址的对象:

var originalAddresses = [
  {
    label: 'home',
    address: { city: 'London', zipCode: '12345' }
  },
  {
    label: 'work',
    address: { city: 'New York', zipCode: '54321' }
  }
];
var updatedAddresses = [
  {
    label: 'home',
    address: { city: 'London (Central)', country: 'UK' }
  },
  {
    label: 'spain',
    address: { city: 'Madrid', zipCode: '55555' }
  }
];

现在我想通过label合并这些数组，并比较地址的各个属性，只合并新地址中实际存在的属性。所以结果应该是这样的:

var result = [
  {
    label: 'home',
    address: { city: 'London (Central)', zipCode: '12345', country: 'UK' }
  },
  {
    label: 'work',
    address: { city: 'New York', zipCode: '54321' }
  },
  {
    label: 'spain',
    address: { city: 'Madrid', zipCode: '55555' }
  }
]

我如何使用lodash做到这一点?我尝试了unionBy()和merge()的组合。使用unionBy()，我可以按标签比较和连接数组，但这总是替换整个对象。我当然可以合并地址但这不会按标签发生

您可以使用_.keyBy(arr, 'label')将两个数组转换为对象，然后使用_.merge()进行深度合并:

var originalAddresses = [{
  label: 'home',
  address: {
    city: 'London',
    zipCode: '12345'
  }
}, {
  label: 'work',
  address: {
    city: 'New York',
    zipCode: '54321'
  }
}];
var updatedAddresses = [{
  label: 'home',
  address: {
    city: 'London (Central)',
    country: 'UK'
  }
}, {
  label: 'spain',
  address: {
    city: 'Madrid',
    zipCode: '55555'
  }
}];
var result = _.values(_.merge(
  _.keyBy(originalAddresses, 'label'),
  _.keyBy(updatedAddresses, 'label')
));
console.log(result);

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

我尝试使用VanillaJS来处理这个问题。

const originalAddresses = [{
    label: 'home',
    address: {
        city: 'London',
        zipCode: '12345'
    }
}, {
    label: 'work',
    address: {
        city: 'New York',
        zipCode: '54321'
    }
}];
const updatedAddresses = [{
    label: 'home',
    address: {
        city: 'London (Central)',
        country: 'UK'
    }
}, {
    label: 'spain',
    address: {
        city: 'Madrid',
        zipCode: '55555'
    }
}];

const groupBy = (array, property) => {
    return array.reduce((acc, cur) => {
            let key = cur[property]
            if (!acc[key]) {
                acc[key] = []
            }
            acc[key].push(cur)
            return acc
        }
        , {})
}
const groupByLabel = groupBy([...originalAddresses, ...updatedAddresses], 'label')
const result  = Object.keys(groupByLabel).map((key) => {
        return {
            label: groupByLabel[key][0].label,
            address: groupByLabel[key].reduce((acc, cur) => {
                    return Object.assign(acc, cur.address)
                }
                , {})
        }
    }
)
console.log(result)