利用Lodash进行深度合并

Question

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

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

如何使用房客 来实现这一点--我尝试了unionBy()和merge()的组合。使用unionBy()，我能够通过label比较和连接数组，但这总是替换整个对象。我可以确定合并地址，但这不会发生在标签上。

Answer 1

可以使用_.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>

​

Answer 2

我尝试使用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)